How Alpine.js and Tailwind replace RequireJS and Knockout in Hyvä

Hyvä is often described as “a faster theme”. That is true, but it hides the real reason it is faster.

Hyvä does not tune Luma’s frontend. It replaces it with a different, much smaller stack. This post shows what that stack looks like in practice.

The Luma stack in short

Luma’s frontend is built from four main pieces.

• RequireJS loads JavaScript modules on demand and manages their dependencies.
• jQuery and jQuery UI power many widgets, such as tabs, menus and modals.
• KnockoutJS renders dynamic parts, such as the mini cart, customer data and the whole checkout.
• LESS compiles the theme styles, with a deep system of variables, mixins and overrides.

Each piece made sense when Magento 2 was designed. Together they produce a heavy page.

In our Hyvä vs Luma benchmark, a clean Luma page made more than 250 requests and loaded around half a megabyte of JavaScript.

The Hyvä stack in short

Hyvä replaces those four pieces with two.

• Alpine.js handles interactivity, written directly in the HTML of the template.
• Tailwind CSS handles styling, using utility classes in the templates.

There is no module loader, no jQuery dependency and no Knockout template system. The same clean benchmark page on Hyvä made under 20 requests and loaded around 26 KB of JavaScript.

A simple example: a toggle

Take something every store has: a block of content that opens and closes.

In Luma, you typically attach a jQuery UI widget through a RequireJS initialisation block in the template.

<div id="product-details">
    <div data-role="title">Details</div>
    <div data-role="content">...</div>
</div>
<script type="text/x-magento-init">
{
    "#product-details": {
        "collapsible": { "openedState": "active" }
    }
}
</script>

To run this, the browser loads RequireJS, then the mage initialiser, then jQuery, jQuery UI and the collapsible widget.

In Hyvä, the same behaviour is a few attributes on the HTML itself.

<div x-data="{ open: false }">
    <button type="button" @click="open = !open" :aria-expanded="open">
        Details
    </button>
    <div x-show="open" x-cloak>...</div>
</div>

Alpine.js is already on the page, so nothing else needs to load. The logic sits next to the markup it controls, which makes it easy to read and change.

Customer data without Knockout

Magento uses “private content” for anything personal on a cached page, such as the cart count or the customer’s name. In Luma, KnockoutJS templates render that data on the client.

Hyvä keeps Magento’s customer data sections but drops Knockout. When the data is available, Hyvä dispatches a browser event, and any Alpine component can listen for it.

<div x-data="{ count: 0 }"
     @private-content-loaded.window="count = $event.detail.data.cart?.summary_count || 0">
    <span x-text="count"></span>
</div>

The full-page cache still serves the same page to everyone. Only the small personal parts are filled in afterwards, which keeps caching effective.

Styling: LESS versus Tailwind

In Luma, changing a button usually means finding the right LESS variable or mixin, overriding it in a child theme and recompiling. The final CSS file contains styles for many components the page never uses.

In Hyvä, the styling sits in the template as Tailwind utility classes.

<button type="submit" class="btn btn-primary w-full md:w-auto">
    Add to cart
</button>

At build time, Tailwind scans the theme’s templates and writes a CSS file that contains only the classes actually found. Unused styles never reach the browser.

Brand colours, fonts and spacing live in the theme’s Tailwind configuration as design tokens. Change a token, rebuild, and the change applies across the store. The same approach lets a team adjust the look of a store without touching dozens of stylesheets.

What this means for your developers

For a team coming from Luma, Hyvä usually feels simpler.

• Templates are still PHTML files with Magento’s layout XML, so the Magento structure is familiar.
• Alpine.js is small and quick to learn for anyone who knows basic JavaScript.
• Tailwind replaces long override chains with classes you can read in the template.
• There is no RequireJS configuration or JavaScript bundling to debug.

There is one new habit. After changing templates or the Tailwind configuration, the theme’s CSS has to be rebuilt with its Node build script. That step belongs in your deploy process.

What this means for your extensions

This is the other side of the same coin. Any extension that ships its own RequireJS modules, Knockout templates or jQuery widgets expects the Luma stack to be present.

On Hyvä, that stack is gone, so the extension’s storefront part does not work as it is. Its backend logic still works.

The fix is a compatibility module that rewrites the frontend part in Alpine.js and Tailwind. Many exist already, and the rest can be written. See our Hyvä migration checklist for how to audit your extensions before you start.

Where Alpine stops: checkout

Checkout is the most complex page in any store, with many steps, validations and payment integrations.

Hyvä Checkout handles this with Magewire, a server-driven component library for Magento. Much of the checkout logic runs on the server in PHP, and the browser receives updated HTML, with Alpine.js handling small client-side behaviour.

We explain when Hyvä Checkout pays off, and when another checkout fits better, in is Hyvä Checkout worth it?.

FAQ

Can I still use jQuery on a Hyvä store?

Technically you can load it, but it adds back weight that Hyvä removed. It is better to rewrite the behaviour in Alpine.js or plain JavaScript.

Do my developers need to learn a new framework?

They need to learn Alpine.js and Tailwind CSS. Both are small, well documented and quick to pick up for anyone who already works with Magento templates.

Does Hyvä change Magento’s layout XML?

No. Hyvä uses Magento’s normal layout XML and PHTML templates. What changes is the JavaScript and CSS inside those templates.

Planning a move from Luma, or need an extension made Hyvä-ready? See how we work on our Hyvä theme development page.