Skip to content

CMS Tailwind JIT Module

The CMS Tailwind JIT module (Hyva_CmsTailwindJit) enables Tailwind CSS classes to work in CMS-managed content. Tailwind's standard build only includes classes found in your theme's template files at compile time. Classes added by content editors in CMS blocks, pages, or product descriptions are never scanned at build time and end up missing from the compiled styles.css.

The module solves this by running a browser-based Tailwind compiler whenever content is saved in the Magento admin. The compiled CSS is stored in the database and injected inline immediately before the content when it renders on the storefront. This happens entirely at save time, so there is no performance impact on storefront page loads.

What is in this section

  • Installation: installing the module from Packagist and configuring instances without PageBuilder.
  • Configuration: custom Tailwind configuration for in-browser compilation and custom CSS for CMS content.
  • Alpine.js and Single-Quoted Classes: escaping single quotes in Alpine.js :class bindings and a workaround for the Tailwind JIT quote-escaping bug.
  • Extending to Custom Content Types: the JavaScript API and integration steps for adding JIT compilation support to your own content types.

Supported Content Types

The CMS Tailwind JIT module compiles and injects Tailwind styles for the following content types:

  • CMS Blocks - Reusable content blocks used throughout the site
  • CMS Pages - Full standalone pages managed in the Magento admin
  • Product Descriptions - Both full description and short description fields
  • Category Descriptions - Category landing page content

The module integrates with multiple Magento content editors:

  • Hyvä CMS
  • Magento PageBuilder
  • The classic TinyMCE editor

In PageBuilder, the content preview feature works for both CMS Block widgets and HTML Code content types.

Compiled CSS Storage

The module stores compiled CSS in dedicated database tables. Each table holds pre-compiled CSS mapped to the entity ID and store view, so no on-the-fly compilation is needed during frontend requests.

Content Type Database Table
CMS Blocks hyva_cms_block_tailwindcss
CMS Pages hyva_cms_page_tailwindcss
Product Descriptions hyva_catalog_product_tailwindcss
Category Descriptions hyva_catalog_category_tailwindcss