Tailwind v4: wat is er veranderd?

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 verschuiving: van JavaScript configuratie naar CSS-first met @theme

Tailwind v3: JavaScript config

❌tailwind.config.js met JavaScript objecten
❌PostCSS plugin verwerkt de config
❌Kleuren als hex of rgb waarden
❌Aparte config voor dark mode
❌Build-time verwerking nodig

Tailwind v4: CSS-first @theme

✅@theme {} blok direct in je CSS
✅Native CSS custom properties
✅oklch() kleuren: perceptueel uniform
✅Dark mode via CSS variabelen
✅Snellere build, minder configuratie

De fundamentele verschuiving: van JavaScript configuratie naar CSS-first design tokens

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.

Snellere builds

0 JS

Configuratiebestanden nodig

CSS-native variabelen

0M+

oklch kleuren beschikbaar

Tailwind v4 in cijfers: sneller, eenvoudiger en krachtiger

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

Performance vergelijking: Tailwind v4 is tot 60% sneller door het wegvallen van JS config parsing

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 strategie

Migreer niet alles in één keer. Begin met je kleurenpalet, test dark mode grondig, en gebruik de officiële codemod voor de rest. De meeste breaking changes zitten in custom configuratie — de utility classes zelf zijn grotendeels onveranderd.

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.

Tailwind v3: JavaScript config

Tailwind v4: CSS-first @theme

Blijf op de hoogte