Een standaard Tailwind-installatie genereert gemiddeld 3 tot 5 MB aan CSS vóór purge. Met de juiste configuratie voor Hyvä UI kom je uit op minder dan 15 kB gecomprimeerd. Dat verschil zit niet in magie, maar in drie concrete ingrepen: correcte content-paden, een scherpe theme.extend en slimme pluginkeuzes.
Tailwind config tunen voor Hyvä UI
Een standaard Tailwind-installatie genereert gemiddeld 3 tot 5 MB aan CSS vóór purge. Met de juiste configuratie voor Hyvä UI kom je uit op minder dan 15 kB gecomprimeerd. Dat verschil zit niet in magie, maar in drie concrete ingrepen: correcte content-paden, een scherpe theme.extend en slimme pluginkeuzes.
Waarom de standaard config tekortschiet
Hyvä UI is gebouwd op Tailwind CSS en Alpine.js. Componenten zijn HTML-first: buttons, forms, modals, dropdowns, accordions, navigatie, tabs, product cards — allemaal geschreven in gewone HTML-klassen. Geen runtime CSS-in-JS, geen grote abstractielagen.
Maar dat betekent ook: Tailwind moet precies weten waar die klassen staan. Mis je een pad in je content-array, dan worden componenten weggepurgd uit de build. Je ziet dan live een button zonder styling — terwijl de klassen gewoon in de HTML staan.
Dat is de meest voorkomende fout die wij zien bij teams die voor het eerst met Hyvä UI werken.
Stap 1: content-paden goed zetten
De content-configuratie bepaalt welke bestanden Tailwind scant op klassen. Voor Hyvä UI in een Magento 2-context ziet dat er zo uit:
// tailwind.config.js
module.exports = {
content: [
// Hyvä UI component-bestanden
'./vendor/hyva-themes/hyva-ui/src/**/*.{html,phtml,js}',
// Eigen templates
'./app/design/frontend/<Vendor>/<Theme>/**/*.{phtml,html,xml,js}',
// Alpine.js x-data strings in phtml
'./app/design/frontend/<Vendor>/<Theme>/**/*.phtml',
// Magento layout XML (class-attributen worden soms inline gezet)
'./app/design/frontend/<Vendor>/<Theme>/**/layout/*.xml',
],
// ...
}Gebruik je Hyvä UI buiten Magento — in Laravel, een headless setup of een statische site — dan past je de paden aan naar je eigen mapstructuur. Hyvä UI is framework-agnostisch, dus de configuratie verschilt per context.
Tip: voeg nooit node_modules toe aan je content-paden. Dat vertraagt de build enorm en levert vrijwel nooit nuttige klassen op.
Stap 2: theme.extend in plaats van overschrijven
Hyvä UI leunt op een set design tokens: kleuren, spacing, typografie, border-radius. Die tokens zijn gedocumenteerd in het bijgeleverde Figma Community-bestand, waar ontwerp en code 1-op-1 matchen.
De fout die je hier wilt vermijden: het volledige theme overschrijven in plaats van uitbreiden. Als je theme.colors direct instelt (zonder extend), gooit Tailwind alle standaard-klassen weg. Inclusief klassen die Hyvä UI intern gebruikt.
Gebruik altijd theme.extend:
module.exports = {
content: [ /* zie boven */ ],
theme: {
extend: {
colors: {
primary: {
DEFAULT: '#1a56db',
dark: '#1e429f',
light: '#ebf5ff',
},
secondary: {
DEFAULT: '#0e9f6e',
dark: '#057a55',
},
},
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui'],
},
borderRadius: {
'btn': '0.375rem',
},
spacing: {
'header': '4rem',
},
},
},
}Zo behoud je alle standaard-utilities en voeg je alleen je eigen tokens toe. Dit matcht direct met hoe Hyvä UI zijn componenten opbouwt.
Stap 3: plugins selectief toevoegen
Tailwind heeft een aantal officiële plugins: @tailwindcss/forms, @tailwindcss/typography, @tailwindcss/aspect-ratio. Voeg alleen toe wat je écht gebruikt.
Voor Hyvä UI is @tailwindcss/forms bijna altijd nuttig: het geeft form-elementen een consistente basis. Zonder die plugin zien , en