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:
Welcome to My Hyvä Store
Tailwind classes apply instantly.
4. Adding Alpine.js
Example button toggle:
Hello from Alpine.js!
Hyvä auto-loads Alpine.js — no extra setup needed.