LogoLogo
Siteglide.comAdminRoadmap
  • ๐Ÿ‘‹Welcome
  • Get Started
    • ๐Ÿš€Quickstart Guides
    • โ”Support & FAQs
      • โ„น๏ธSiteglide Support Policy
      • โ„น๏ธSiteglide Technology Stack
      • โ„น๏ธExternal Resources
      • โ„น๏ธFront-end Browser Support
  • Portal
    • Account
    • Sites
      • ๐Ÿš€Quickstart: Create a Site
      • โ„น๏ธSite Details
      • โ„น๏ธSite Users
      • ๐Ÿ“‹Install & Manage Modules
      • ๐Ÿ’ณGo Live
      • ๐Ÿ’ณSubscription
      • ๐ŸŒDomains
        • ๐Ÿ“‹Add a Fully Delegated Domain
        • ๐Ÿ“‹Add an External Domain
        • ๐Ÿ’ปSubdomain on a separate instance
        • ๐Ÿ“‹How to setup a multi domain start page
      • โ˜๏ธSite Backups and Disaster Recovery
    • Users
      • ๐Ÿ“‹User Roles
      • ๐Ÿ“‹Invite & Manage Users
    • Billing
      • ๐Ÿ’ณBilling Setup
      • ๐Ÿ’ณSubscriptions and Changes
      • ๐Ÿ’ณAutomatic Site Upgrades
      • ๐Ÿ’ณInvoices
    • Tickets
    • Marketplace
    • Agencies
      • ๐Ÿ‘ฉโ€๐Ÿ’ปAgency Account
      • ๐Ÿ‘ฉโ€๐Ÿ’ปClients
      • ๐Ÿ‘ฉโ€๐Ÿ’ปSite Copies
      • ๐Ÿ‘ฉโ€๐Ÿ’ปAgency Whitelabelling
  • Developer Tools
    • CLI
      • ๐Ÿš€Quickstart: CLI
      • โ„น๏ธAbout
      • ๐Ÿ“‹Site Setup
      • โ”Troubleshooting
      • ๐Ÿ’ปReference
      • ๐Ÿ›ณ๏ธCLI Changelog
      • ๐Ÿง™โ€โ™‚๏ธGo Further: CLI
        • Creating WebApps via CLI
    • Liquid
      • โ„น๏ธAbout
      • ๐Ÿ’ปReference
      • Accessing Data in Liquid Variables - Tutorial 1 - Using Dot Notation
      • Accessing Data in Liquid Variables - Tutorial 2 - Iterating over Arrays and Objects
      • Using Collections with WebApps and Modules
      • Accessing Data from the Global Context Variable
      • Truthiness - Using Liquid to determine if a field is empty or blank
      • ๐Ÿ“‹Alternatives to Storing and Executing Liquid from Database Items
    • GraphQL
      • โ„น๏ธAbout GraphQL
      • ๐Ÿ“‹Tutorials
        • Tutorial 1 - Your First Query
        • Tutorial 2 - Pagination
        • Tutorial 3 - Filtering the Results
        • Tutorial 3 - (Answers)
        • Tutorial 4 - Advanced Filtering
        • Tutorial 4 - (Answers)
        • Tutorial 5 - Using Liquid to run GraphQL queries on your Site
        • Tutorial 6 - Variables
        • Tutorial 6 - (Answers)
        • Tutorial 7 - Sorting
        • Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
        • Tutorial 9 - Using Mutations to Create New Records
        • Tutorial 10 - Using Mutations to Edit a Record
        • Tutorial 11 - Using Mutations to Delete an Item
        • Tutorial 12 - Related Records and Datasources
    • Configuration
      • โ„น๏ธField Types
      • โ„น๏ธCustom Field IDs
    • Zapier Integration
      • โ„น๏ธFormatting arrays correctly
    • Developer Marketplace
      • โ„น๏ธAbout Building Modules
      • โ„น๏ธModule Setup
      • โ„น๏ธSite Template Modules - and How to Make Your Own
      • โ„น๏ธCreate Folder Structure
      • โ„น๏ธUpdating Modules
      • โ„น๏ธSubmit Module for Approval
      • โ„น๏ธAdding Payment to a Module
      • โ„น๏ธTheme Module Example
      • โ„น๏ธData & UI Module Example
      • ๐Ÿ’ปReference
      • ๐ŸŒณFile Structure
    • Release Notes
      • ๐Ÿ›ณ๏ธSiteglide Admin/API - Changelog
      • ๐Ÿ›ณ๏ธModule - System Files - Changelog
      • ๐Ÿ›ณ๏ธModule - eCommerce - Changelog
      • ๐Ÿ›ณ๏ธModule - Menu - Changelog
      • ๐Ÿ›ณ๏ธModule - Slider - Changelog
      • ๐Ÿ›ณ๏ธModule - Secure Zones - Changelog
      • ๐Ÿ›ณ๏ธModule - FAQ - Changelog
      • ๐Ÿ›ณ๏ธModule - Events - Changelog
      • ๐Ÿ›ณ๏ธModule - Blog - Changelog
  • SiteBuilder
    • Build Sites Faster
      • ๐Ÿš€Quickstart: SiteBuilder
      • About
      • Site Setup
        • ๐Ÿ—๏ธMarketplace Themes & Templates
        • ๐Ÿ—๏ธCreate Site From Template
        • ๐Ÿ—๏ธInstall SiteBuilder Module
        • ๐Ÿ—๏ธCreate a Page Template
        • ๐Ÿ—๏ธSet Up Tailwind CSS with the recommended CLI method
      • Styling
        • ๐Ÿ—๏ธEditing Tailwind CSS using the recommended CLI method
        • ๐Ÿ—๏ธTailwind CSS Themes - Choosing a Build Method
        • ๐Ÿ—๏ธTailwind CSS - Preview Mode
        • ๐Ÿ—๏ธTailwind's JIT Compiler Via CDN (deprecated)
        • ๐Ÿ—๏ธTheme Presets
        • ๐Ÿ—๏ธExample Tailwind Project Setup
      • Layouts
        • ๐Ÿ—๏ธInsert Static Layouts
        • ๐Ÿ—๏ธInstalling Dynamic Layouts
        • ๐Ÿ—๏ธEditing Dynamic Layouts
        • About Layouts
          • ๐Ÿ—๏ธDynamic Layouts
          • ๐Ÿ—๏ธStatic and Dynamic Form Layouts
          • ๐Ÿ—๏ธSliders
      • ๐Ÿ’ปReference
    • Advanced Features
      • ๐ŸงžSiteBuilder Live Updates API
        • ๐Ÿ‘€Live Updates Reference
        • ๐Ÿ”นLive Updates Markup Example
        • ๐Ÿ“‹Steps to Setting Up Live Updates API in a Module/WebApp Layout
        • ๐Ÿ”นLive Updates Example - Enforcing Filters
        • ๐Ÿ“‹Steps to Use Live Updates Methods
        • ๐Ÿ“‹Steps to Initialise Live Updates with JS
        • ๐Ÿ—“๏ธLive Updates Changelog
      • โ„น๏ธSiteBuilder JavaScript
        • โ„น๏ธForms JS
        • โ„น๏ธSocial Sharing JS
        • โ„น๏ธSliders JS
        • โ„น๏ธDark Mode JS
        • โ„น๏ธCookie Settings JS
      • โ„น๏ธSiteBuilder Liquid Includes
        • โ„น๏ธPagination
      • โ„น๏ธSiteBuilder Liquid Functions
        • โ„น๏ธDetail Page Valid
        • โ„น๏ธField Mapping
        • โ„น๏ธGet Table Config
        • โ„น๏ธCase From Order ID
      • ๐Ÿ—“๏ธSiteBuilder Changelog
    • Extend SiteBuilder
      • โ„น๏ธCreate SiteBuilder Themes
      • โ„น๏ธCreate Marketplace Modules
      • โ„น๏ธAdding Dynamic Layouts to Themes & Modules
      • โ„น๏ธAdding Static Layouts to your Theme
      • ๐Ÿ’ปReference
  • CMS
    • Dashboard
    • Pages
      • ๐Ÿš€Quickstart: Pages
      • โ„น๏ธStudio
      • โ„น๏ธCode View & Toolbox
      • โ„น๏ธAbout Pages
        • โ„น๏ธPage Settings
        • โ„น๏ธCustom Fields in Pages
        • โ„น๏ธPages with Siteglide CLI
      • โ„น๏ธAbout Page Templates
        • โ„น๏ธPage Templates with Siteglide CLI
        • Preventing Duplicate Content
      • โ„น๏ธSystem Pages
      • ๐Ÿ’ปReference
      • ๐ŸŒณFile Structure
    • Content Sections
    • File Manager
      • ๐Ÿ”นAbout Assets
      • ๐Ÿ”นLinking to Assets Explained
      • ๐Ÿ”งAssets Troubleshooting
      • ๐Ÿ”นSiteglide Scripts Explained
      • ๐Ÿ’ปAssets with CLI
      • ๐Ÿ”ผMigrating Assets
      • ๐Ÿ“‹Steps to Optimise Images on the Fly with Cloudinary
      • ๐Ÿ”นsiteglide_head_scripts and siteglide_footer_scripts Explained
      • ๐ŸŒณAssets File Structure
      • ๐Ÿ‘€Tags for Assets
    • Forms
      • Quickstart: Forms
      • โ„น๏ธAbout Forms
      • ๐Ÿ“‹Guides: Forms
        • ๐Ÿ“‹Steps to Using Separate Fields for First Name and Surname in a Form
        • ๐Ÿ“‹Steps to Programmatically Redirecting after a Form Submission
        • ๐Ÿ“‹Steps to Adding Form Confirmation Pages
        • ๐Ÿ“‹Steps to Adding a Progress Bar
        • ๐Ÿ“‹Steps to Changing Form Styling on Submission Using CSS
        • ๐Ÿ“‹Steps to Using Custom Field Set fields in a Form's Custom Layout
      • ๐Ÿง™โ€โ™‚๏ธGo Further: Forms
        • โ„น๏ธMigrating Forms
        • โ„น๏ธExplained - Preventing Spam Form Submissions and Captchas
        • โ„น๏ธExplained - Show Clearly When a User is Already Logged in When Submitting a Form
        • โ„น๏ธForms Error Callback and Validation
        • โ„น๏ธForms Success Callback
        • โ„น๏ธFile Upload Previews
      • ๐ŸŒณForms File Structure
      • ๐Ÿ’ปReference
      • โ”Troubleshooting
    • Automations
      • ๐Ÿš€Quickstart: Automations
      • โ„น๏ธAbout
        • โ„น๏ธEmail Templates
        • โ„น๏ธEmail Automations and Email Templates with Siteglide CLI
      • ๐Ÿ“‹Guides
        • โ„น๏ธIntegration Automations
        • โ„น๏ธA Transactional Email Example
        • โ„น๏ธAn API Call Action Example
        • โ„น๏ธA Custom Liquid Action Example
        • ๐Ÿ“‹Steps to Testing Emails on a Staging Site
        • ๐Ÿ“‹Steps to Authenticating Sendgrid Emails on Live Sites
      • ๐Ÿง™โ€โ™‚๏ธGo Further
      • ๐Ÿ’ปReference
      • ๐ŸŒณFile Structure
    • Categories
      • ๐Ÿš€Quickstart: Categories
      • โ„น๏ธAbout
        • โ„น๏ธOutputting Categories on WebApp / Module / eCommerce Layouts
        • โ„น๏ธFiltering WebApps and Modules by Categories Using Liquid Parameters
      • ๐ŸŒณFile Structure
      • ๐Ÿ’ปReference
    • Company Information
      • โ„น๏ธAbout
      • ๐Ÿ’ปReference
      • โ”Troubleshooting
    • URL Redirects
  • Modules
    • Core Modules
      • MenuBuilder
        • ๐Ÿš€Quickstart: Menu Builder
        • โ„น๏ธAbout
      • Secure Zones
        • ๐Ÿš€Quickstart: Secure Zones
        • โ„น๏ธAbout
          • ๐Ÿ“‹Dynamically Assign a Secure Zone during Form Submission
        • ๐Ÿง™โ€โ™‚๏ธGo Further
          • โ„น๏ธSecure Zones with Siteglide CLI
          • โ„น๏ธUsing the context.current_user object
      • Media Downloads
        • ๐Ÿš€Quickstart: Media Downloads
        • โ„น๏ธLayouts
        • ๐Ÿ’ปReference
      • Blog & Authors
        • ๐Ÿš€Quickstart: Blog & Authors
        • ๐Ÿ”นBlog Archive & Date Filtering
        • ๐Ÿ”นBlog Search
        • ๐Ÿ”นBlog Filter by Category
        • ๐Ÿ”นBlog Filter by Author
        • ๐ŸŒณFile Structure
        • ๐Ÿ’ปReference
      • Events
        • ๐Ÿš€Quickstart: Events
        • โ„น๏ธStandard List View
        • โ„น๏ธGetting Started with Event Filtering & Searching
        • โ„น๏ธFilter by Category
        • โ„น๏ธFilter By Host (Author)
        • โ„น๏ธFilter by Event Dates
        • โ„น๏ธDatasourcing the Event Host
        • โ„น๏ธSearch
        • โ„น๏ธMap List View
        • โ„น๏ธCalendar List View
      • FAQ
        • ๐Ÿš€Quickstart: FAQ
        • ๐Ÿ’ปReference
      • Testimonials
        • ๐Ÿš€Quickstart: Testimonials
        • ๐Ÿ’ปReference
      • Slider
        • ๐Ÿš€Quickstart: Slider
        • ๐Ÿ’ปReference: Slider
    • Community Modules
      • ๐Ÿ—๏ธSiteBuilder
      • ๐Ÿš€CRM Sync
        • โ„น๏ธAbout CRM Sync Module
        • ๐Ÿ“‹Steps to Set Up CRM Sync on an Automation
        • ๐Ÿ—“๏ธCRM Sync Changelog
    • Go Further: Modules
      • โ„น๏ธFront-end Submit Modules
  • WebApps
    • ๐Ÿš€Quickstart: WebApps
    • WebApp Items
      • ๐Ÿ“‹Create WebApp Items
      • ๐Ÿ“‹Importing and Exporting
    • Layouts
      • โ„น๏ธWebApp List Layout
      • โ„น๏ธWebApp Detail Layouts
    • Go Further: WebApps
      • ๐Ÿ“‹Searching by Location
      • ๐Ÿ“‹Searching - Advanced Filtering
      • ๐Ÿ“‹Searching - By Keyword
      • ๐Ÿ“‹Front End Create Forms
      • ๐Ÿ“‹Front End Update Forms
      • ๐Ÿ“‹Front End Delete
  • WebApp Troubleshooting
  • eCommerce
    • ๐Ÿš€Quickstart: eCommerce
    • Get Started
      • ๐Ÿ’กAbout the eCommerce Module
      • Settings
      • ๐Ÿ“‚Cart, Checkout and Quotes
        • ๐Ÿ’กAbout Cart, Checkout and Quotes
        • ๐Ÿ“‹Steps to Implement a Guest Checkout Flow
        • ๐Ÿ“‚Product Views
          • ๐Ÿ”นProduct Layouts
          • ๐Ÿ”นProduct List Layout
          • ๐Ÿ”นProduct Detail Layout
          • ๐Ÿ”นAdd to Cart Button
          • ๐Ÿ“‹Steps to Datasource and Display Related Products
          • ๐Ÿ”นDynamic Product Layouts based on Categories
          • ๐Ÿ“‚Attribute Selection
            • ๐Ÿ”นAttribute Layout - Presenting the Choice to the Customer
            • ๐Ÿ”นAttributes - Changing Product Price after Change
          • ๐Ÿ“‚Discount Selection
            • Discount Codes Layout
            • Minimum Payments
          • ๐Ÿ“‚Shipping Selection
            • Shipping Options Layout
        • Managing Products
          • Creating and Editing
          • Securing Products
          • Location
          • Custom Fields
          • Edit Module Structure
          • Product Custom Field Sets
          • Inventory
          • Managing Attributes
          • Pricing
          • Product Categories
          • Open Graph Fields
          • SEO Fields
          • Standard Fields
          • Product Import and Export
          • Discounts
        • ๐Ÿ“‚Cart
          • ๐Ÿ”นCart Layouts
          • Checking Inventory in Cart
          • Updating Quantity in Cart
          • Updating Displayed Cart Quantity
        • ๐Ÿ“‹How to Set Up a Shopping Cart and Guest Checkout - Tutorial
        • ๐Ÿ“‚Checkout Forms
          • ๐Ÿ”นCheckout Form Layouts
          • ๐Ÿ”นCheckout Forms with PayPal
        • ๐Ÿ“‚Orders
          • Order Confirmation
          • Re-Ordering
          • ๐Ÿ”นOrders Layouts
        • ๐Ÿ“‹Steps to Add Secure Zones and User Orders View to your Checkout Flow
        • Quotes
        • Selling Digital Products
        • ๐Ÿ”นVolume Pricing
        • ๐Ÿ“‹Steps - Alternatives to Product Grouping
      • ๐Ÿ“‚Basic Payment Forms
        • ๐Ÿ’กAbout Basic Payment Forms
        • ๐Ÿ“‹Steps to Set up a Basic Payment Form (with a Fixed Payment Amount)
        • ๐Ÿ“‹Authorize.net Basic Payment Forms
        • ๐Ÿ“‹PayPal Basic Payment Forms
        • ๐Ÿ“‹Steps to Allow User to Decide Amount they Will Pay
        • ๐Ÿ“‹Step-by-step Basic Payment Confirmations
        • ๐Ÿ‘€Basic Payment Forms Reference
        • โ„น๏ธecommerce/basic_payment
      • ๐Ÿ“‚Payment Gateways
        • ๐Ÿ’ปBuilding a Custom Payment Gateway
          • ๐Ÿ“‹Steps to Support Basic Payment Forms with your Custom Payment Gateway
          • ๐Ÿ“‹Steps to Support Checkout with your Custom Payment Gateway
        • ๐Ÿ”นPaypal Custom Parameters
        • ๐Ÿ”นStyling Stripe Card Elements
        • ๐Ÿ’กAbout Payment Gateways
        • ๐Ÿ“‹Steps to Switching Payment Gateway
        • ๐Ÿ”นTest Cards
      • ๐Ÿ“‚Currency and Tax
        • ๐Ÿ’กAbout Tax Codes
        • Currency Changer
        • Tax Code Changer
        • Formatting Currency
      • ๐Ÿ“‚Subscriptions
        • ๐Ÿ’กAbout Subscriptions
        • Managing Subscriptions
          • Creating Subscription Products
          • Changing Price and Billing Interval
          • Creating a Form for Signing Up and Changing Payment Details
          • Subscription Order Status Explained
          • Terms and Conditions (Good Practice)
        • ๐Ÿ“‹Subscriptions Payment Gateway Setup
        • Subscriptions List Layout
        • Subscriptions Detail Layout
        • User's Active Subscriptions
        • Subscription Action Required
        • Cancelling Subscriptions
      • ๐ŸŒณBasic Payment Forms Folder Structure
      • ๐ŸŒณCart and Checkout Folder Structure
  • CRM
    • ๐Ÿš€Quickstart: CRM
    • Users
      • User Details
      • User Secure Zones
      • How Users Edit their Email and Password Front End
      • Custom Field Sets & CRM Custom Fields
      • Storing User's Favourite WebApp / Module Items
    • Companies
    • Cases
      • User's Form Submissions (Cases)
  • Site Manager
    • Code Editor
    • Templates (Pages & Email)
    • Headers & Footers
    • Code Snippets (Includes)
      • ๐Ÿ”งIncludes Troubleshooting
      • ๐Ÿ‘€constants_json
      • ๐Ÿ‘€constants
      • ๐ŸŒณIncludes File Structure
      • ๐Ÿ’ปIncludes with Siteglide CLI
      • ๐Ÿ”งTags for Includes
    • System Pages
      • Automatic Site Maps
    • System Emails
    • Data Management
    • Admin Menu Editor
    • Integrations
  • Reporting
    • ๐Ÿš€Quickstart: Reports
  • Miscellaneous
    • System Features
      • Pagination on Liquid Tags
      • Custom Pagination Layouts
      • Timezones in the Siteglide Admin and on the front-end of your Site
      • Module/WebApp Caching
      • Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
      • Translating Dates
      • Site Search
      • About Site Search
      • AI Tools for the Rich Text Editor
      • Cookies on Siteglide Sites
    • Front-End Performance
      • Video Embeds
      • Forms Above the Fold
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. SiteBuilder
  2. Build Sites Faster
  3. Styling

Tailwind CSS Themes - Choosing a Build Method

PreviousEditing Tailwind CSS using the recommended CLI methodNextTailwind CSS - Preview Mode

Last updated 4 months ago

Was this helpful?

Choosing a Build Method

Tailwind CSS is accelerating in popularity with its bold new approach to writing CSS for the web. Youโ€™re probably wondering how you can harness this new framework on a Siteglide site?

Tailwindโ€™s approach to performance means it provides a huge range of utility classes, but to prevent it from slowing down your site with classes you donโ€™t need, it builds a smaller CSS file containing just the subset of classes that youโ€™re actually using in your project.

There are a few alternatives to consider when it comes to generating a Tailwind CSS file for your Siteglide site:

  1. A Command Line Interface (CLI) Compilation on your machine (recommended)

  2. Preview Mode

  3. Just In Time (JIT) Compilation in the Browser (deprecated)

Which one is right for me?

That depends!

Both methods have their advantages, which we'll look at here, but it also depends on the preference of the developer and the type of project you're working on.

Question
Tailwind CLI
Preview Mode
JIT CDN (deprecated)

Will it support CSS classes that sit inside Secure Zones or other Liquid logical statements?

โœ”๏ธ

โœ”๏ธ So long as it uses Flowbite blocks or components.

Can I use the latest version of Tailwind?

โœ”๏ธ

โœ”๏ธ

Not yet. You can use most features from version 2.0 of Tailwind. We rely on Open Source code to provide the JIT method and it is not possible to keep it fully up to date as Tailwind brings out new versions.

Can I use 3rd party Tailwind Plugins?

โœ”๏ธ

โœ”๏ธonly when used in combination with a CLI build.

Can I add Flowbite blocks from the SiteBuilder Module and have them look right out of the box?

โŒ You will need to use CLI to pull your site to your machine, rebuild Tailwind and sync the new CSS file.

โœ”๏ธ But if you're changing brand variables, or adding new Tailwind classes not used by Flowbite, you will need to complement with a CLI.

โœ”๏ธ

Is it optimised for performance?

โœ”๏ธ CSS is ready to go before user visits the page.

โŒWhile an improvement on JIT or Tailwind Play CDN, extra CSS files will be slower than CLI build only.

In the end, it depends on your preference and the way your clients wish to use your site.

If you use the Siteglide-CLI already to take advantage of modern code editing tools, you'll be right at home with our recommended method: Tailwind CLI.

If you, or your client, wish to build and preview your Pages in the Siteglide Admin without frequent use of the Siteglide CLI, Preview Mode may be for you. We still recommend using the Tailwind CLI now and again to set up your brand variables and to set them consistently across all of your pages at once, but this does not need to be done every time you make a change in Admin, allowing for a potentially smoother experience for clients and development.

โŒ See for possible workarounds and recommendations

โœ”๏ธ See for details. The 1st party plugins will work well but we cannot guarantee that all 3rd party plugins will.

โŒ See the for more details on caching to optimise performance.

๐Ÿ—๏ธ
๐Ÿ—๏ธSet Up Tailwind CSS with the recommended CLI method
๐Ÿ—๏ธEditing Tailwind CSS using the recommended CLI method
๐Ÿ—๏ธTailwind CSS - Preview Mode
Beyond Code - Tailwind's JIT Tailwind Compiler Via CDN
JIT section
Safelisting classes which are added via user-interaction