Van JavaScript naar CSS
De grootste verandering in Tailwind v4 is de verschuiving van tailwind.config.js naar CSS-first configuratie met @theme. Na drie maanden dagelijks gebruik kan ik zeggen: het is een enorme verbetering.
De nieuwe @theme syntax
In plaats van een JavaScript configuratiebestand definieer je nu je design tokens direct in CSS:
@theme {
--color-primary-500: oklch(0.637 0.237 25.331);
--color-primary-600: oklch(0.577 0.245 27.325);
--font-heading: "DM Serif Display", serif;
--font-body: "Inter", sans-serif;
}Dit voelt natuurlijker. Je design tokens leven nu waar ze thuishoren — in je stylesheet.
oklch() kleuren
De overstap naar oklch() was voor mij de grootste eye-opener. Het OKLCH kleurmodel is perceptueel uniform, wat betekent dat kleuren met dezelfde lightness waarde er ook daadwerkelijk even helder uitzien.
Voordelen in de praktijk
- Consistente paletten: Genereer een heel kleurenpalet door alleen de hue te veranderen
- Betere dark mode: Verander de lightness waarde en alles klopt
- Geen verrassingen: Kleuren die er "raar" uitzien bij bepaalde hue waarden (het blauwe probleem) zijn verleden tijd
Wat ik mis
Eerlijk is eerlijk: er zijn ook dingen die ik mis aan de oude setup.
IDE ondersteuning
De VS Code plugin werkt goed met @theme, maar de autocomplete voor custom tokens is nog niet zo smooth als bij de oude config. JetBrains heeft dit beter opgepakt.
Documentatie
Veel community content verwijst nog naar v3 patronen. Als je een probleem googelt, moet je goed opletten welke versie het antwoord betreft.
Migratie tips
- Begin met kleuren — Vertaal je kleurenpalet naar oklch() en zet ze in
@theme - Eén bestand tegelijk — Migreer niet alles in één keer
- Test dark mode grondig — De overstap naar oklch() kan subtiele kleurverschillen opleveren
- Gebruik de migration tool — Tailwind biedt een officiële codemod aan
Conclusie
Tailwind v4 is een significante verbetering. De CSS-first benadering voelt logischer, oklch() kleuren geven betere resultaten, en de build performance is merkbaar sneller. De migratie kost tijd, maar het is het waard.