How do I handle custom widgets and CMS blocks on Hyvä?

Handle custom widgets and CMS blocks on Hyvä in two passes. First, install Hyvä’s CMS Tailwind JIT module so Tailwind classes in CMS content compile. Then rewrite each widget’s jQuery or RequireJS code in Alpine.js, either inline in the block or in a Hyvä template. Both passes are needed. Hyvä, the Magento 2 frontend theme, drops jQuery and RequireJS and only compiles Tailwind classes found in theme templates. Some broken scripts throw a console error, while others stop responding with no sign at all.

Why widgets and CMS blocks break on Hyvä

Magento’s default Luma theme loads its JavaScript through RequireJS. Widgets and CMS blocks hook into that loader with data-mage-init attributes, x-magento-init script tags or inline require([...]) calls. On a Hyvä storefront that loader does not exist. The markup still renders, but sliders stay frozen, tabs never open and forms skip validation.

Tailwind styling in CMS content fails for a separate reason. According to Hyvä’s CMS Tailwind JIT documentation, the standard Tailwind build only scans theme template files. Classes that editors add in blocks, pages or product descriptions never get compiled. Old Luma classes fare no better, since the LESS behind them is gone.

How to fix CMS blocks and widgets on Hyvä

1. Audit CMS blocks and widgets on Hyvä for Luma code

Start by finding every block and page that loads Luma JavaScript or embeds a widget. This query lists the likely offenders:

SELECT block_id, identifier FROM cms_block
WHERE content LIKE '%data-mage-init%'
   OR content LIKE '%x-magento-init%'
   OR content LIKE '%require(%'
   OR content LIKE '%{{widget%';

Run the same query against cms_page using page_id. Each {{widget}} directive points to a widget class that needs its own Hyvä template or compatibility module.

2. Make Tailwind classes work in CMS blocks on Hyvä

Install the CMS Tailwind JIT module:

composer require hyva-themes/magento2-cms-tailwind-jit
bin/magento setup:upgrade

When an editor saves content in the admin, the module compiles that content’s Tailwind classes right there in the browser. Each block then renders with its own inline style tag on the frontend.

Coverage includes CMS blocks, CMS pages, and product and category descriptions. The module works in Page Builder, the classic TinyMCE editor and Hyvä CMS. Hyvä CMS, the page editor in the paid Hyvä Commerce suite, installs it by default. The free Hyvä Theme does not. It has been open source since version 1.4 in November 2025. Check with composer show hyva-themes/magento2-cms-tailwind-jit.

Content saved before the install has no compiled styles yet, so re-save each affected block or page. Hyvä’s recompile module, rebuilds stored CMS CSS in bulk. Use it after a theme or Tailwind config change:

composer require hyva-themes/magento2-cms-tailwind-recompile
bin/magento setup:upgrade
bin/magento hyva:cms-tailwind:recompile

That command needs Hyvä’s server-side compiler daemon. You install it with the magento2-cms-tailwind-jit-bridge module and run it as a background process.

Page Builder itself needs no extra module. Hyvä merged its Page Builder compatibility work into the Hyvä theme module.

3. Replace jQuery scripts in CMS blocks with Alpine.js

Alpine.js ships with Hyvä, so small interactions can live directly in the block markup. A Luma collapsible becomes:

<div x-data="{ open: false }">
  <button type="button" @click="open = !open">Delivery information</button>
  <div x-show="open">Orders ship within one working day.</div>
</div>

4. Migrate custom widgets to Hyvä one at a time

• Your own widgets: keep the PHP block class and override only its template in your Hyvä theme. Templates go in app/design/frontend/Vendor/theme/Vendor_Module/templates/, rebuilt in Tailwind and Alpine.js.
• Third-party widgets: check whether the vendor ships a Hyvä version. If not, search the Hyvä Compatibility Module Tracker before building your own compat module.
• Widgets nobody maintains: replace them with plain HTML. Hyvä UI’s WYSIWYG components are built as plain HTML for exactly this use.
• Banners and product listings: Hyvä’s own Hyvä Widgets package offers prebuilt Alpine.js replacements. It needs Magento 2.4.4 or newer, Hyvä Theme 1.1.10 or higher and your Hyvä packagist key.

5. Test migrated widgets on every store view

Hyvä’s CMS Tailwind JIT module compiles styles per store view, so check each one. Open the browser console on every page that uses a migrated block. Look for require is not defined or similar errors.

Fix styling first by installing Hyvä’s CMS Tailwind JIT module. That one install shows which blocks still have a real script problem. Then work through scripts and widgets in order of traffic, starting with the homepage and category pages. If your store has dozens of blocks and several third-party widgets, our Hyvä theme development team can run the audit and build the compat modules for you.