Setting Up TailwindCSS & Alpine.js in Hyvä (With Code Examples)

Hyvä uses TailwindCSS for styling and Alpine.js for interactivity — a much cleaner alternative to KnockoutJS.

This article shows how to:

✔ Compile Tailwind
✔ Add Tailwind classes
✔ Add Alpine.js interactive components

1. Install Node Dependencies

Go to Hyvä theme folder:

cd app/design/frontend/Hyva/default

Install dependencies:

npm install

2. Build TailwindCSS

Run:

npm run build

OR watch changes live:

npm run watch

3. Example: Adding TailwindCSS Classes

Open:

app/design/frontend/Hyva/default/templates/html/header.phtml

Modify header:

<div class="bg-indigo-600 text-white p-4">
    <h1 class="text-3xl font-bold">Welcome to My Hyvä Store</h1>
</div>

Tailwind classes apply instantly.

4. Adding Alpine.js

Example button toggle:

<div x-data="{ open: false }">
    <button class="bg-blue-500 text-white px-4 py-2" @click="open = !open">
        Toggle Message
    </button>

    <p x-show="open" class="mt-2 text-green-600">
        Hello from Alpine.js!
    </p>
</div>

Hyvä auto-loads Alpine.js — no extra setup needed.