Skip to content

Hyvä CMS Tailwind CSS Compilation

Hyvä CMS compiles Tailwind CSS for content built in the Liveview Editor, so utility classes used in components render without a full theme rebuild. This runs on the same compiler infrastructure as the CMS Tailwind JIT module, wired in through Hyvä CMS's own bridge and configuration.

Compilation Strategy

Compilation runs either in-browser (default) or server-side through a Node-based compiler daemon. Both produce the same scoped output; server-side produces a smaller inline CSS payload and uses each theme's real Tailwind config. For the full comparison and daemon setup, see Server-Side CMS Tailwind Compilation and Setting Up the Compiler Daemon; the same daemon serves both native Magento CMS and Hyvä CMS.

Set the strategy in the Magento admin under Stores → Configuration → Hyvä Commerce → Hyvä CMS → CMS Tailwind Compilation → Hyvä CMS Compilation Strategy (config path hyva_cms_tailwind/hyva_cms_bridge/compilation_strategy, global scope only, defaults to in-browser).

When using the in-browser strategy, the compiler version (v3 or v4) is a shared setting with the native Magento CMS/PageBuilder compiler; see In-Browser Compiler Version.

Both backends are pulled in automatically as Hyvä CMS dependencies (hyva-themes/magento2-cms-tailwind-compiler and hyva-themes/commerce-module-cms-tailwind-jit-bridge); there is no separate install step.

Hyvä CMS-Specific Behavior

Compilation happens when content is saved. Enable Update Hyvä Styles on Edit in editor preferences to compile live instead, while editing.

Compilation can also be switched off entirely, globally in store configuration or per Hyvä CMS entity in its content settings.

Compiled CSS is:

  • Scoped per entity with a .hcms-{type}-{id} wrapper selector (for example .hcms-page-42), so styles never leak outside the content.
  • Emitted in a dedicated @layer hyva-cms-tailwind cascade layer, declared with the lowest priority so your theme's styles.css always wins when a CMS class and a theme rule target the same property. This is intentional: Hyvä CMS content should never silently override your theme.

Overriding a theme style on purpose

If a CMS Tailwind class genuinely needs to beat a theme rule, mark it important with Tailwind's ! modifier (!w-96, or md:!p-3 for a variant; Tailwind v4 also supports the trailing form md:p-3!). Prefer fixing the conflict with a dedicated component field where possible; see the best-practice note below.

Keep Tailwind classes out of CMS content

Apply Tailwind classes in your .phtml component templates rather than in the CMS content itself. Building components with dedicated fields and variant templates, instead of asking merchants to type utility classes, keeps styling consistent and the editor simple. See Design components for content editors, not developers for the full design-system guidance.

Hyvä CMS vs Native Magento CMS

This page covers compilation for Hyvä CMS content in the Liveview Editor. Native Magento CMS content (PageBuilder, the WYSIWYG editor, CMS pages, blocks, and product/category descriptions) uses the same compiler daemon but its own bridge and settings; see CMS Tailwind JIT Module.