Tailwind 4.0, wat kunnen we verwachten?

Vorige week lanceerde het team van TailwindCSS de eerste bèta-versie van TailwindCSS 4.0.Voor ons reden genoeg er eens in te duiken om te zien wat we voor nieuws verwachten en ook niet onbelangrijk: hoeveel upgrade-tijd gaat dit geintje weer kosten?

Samengevat:

• Nieuwe high-performance engine: Snellere builds, tot wel vijf keer sneller voor volledige builds en meer dan honderd keer sneller voor incrementele builds.
• CSS-first configuratie: Instellingen kunnen nu direct in je CSS-bestand worden gedefinieerd, wat het proces vereenvoudigt.
• Ondersteuning voor CSS-variabelen: Ontwerpwaarden zijn nu beschikbaar als CSS-variabelen, wat aanpassingen vergemakkelijkt.
• Verbeterde container queries: Meer flexibiliteit bij het ontwerpen van responsieve layouts.
• Nieuwe 3D-transformatie utilities: Mogelijkheden voor 3D-effecten, zoals rotate-x-* en translate-z-*.
• Vernieuwde kleurenpalet: Breder kleurenspectrum met verbeterde consistentie en levendigheid.

De verwachte releasedatum voor de stabiele versie van Tailwind CSS v4.0 is begin 2025.

In meer detail

Tailwind CSS v4.0 staat voor de deur en belooft een aantal leuke verbeteringen die de ontwikkelervaring wat ons betreft zullen verbeteren. Een van de meest opvallende veranderingen is de introductie van een nieuwe high-performance engine die builds tot wel 5x zo snel maakt en incrementele builds zelfs meer dan 100x zo snel. Dit betekent dat je minder tijd kwijt bent aan wachten op compilaties (zeker in teststraten), wat je workflow ten goede komt.

Een andere belangrijke wijziging is de CSS-first configuratie. In plaats van configuratie via JavaScript kun je nu je instellingen direct in je CSS-bestand definiëren. Dit maakt het geheel een meer intuïtieve ervaring en zorgt dat het eenvoudiger is om aanpassingen te doen.

Daarnaast zijn er nieuwe mogelijkheden voor het gebruik van CSS-variabelen, waardoor ontwerpwaarden gemakkelijker kunnen worden aangepast. De ondersteuning voor moderne CSS-functies, zoals container queries, is ook verbeterd, wat je meer flexibiliteit geeft bij het ontwerpen van responsieve layouts.

Tailwind CSS v4.0 is -naar eigen zeggen- ontworpen met “oog op de toekomst”, met native cascade layers en een vernieuwde kleurenpalet die bredere kleurenspectra ondersteunt. Wij moeten zeggen: het ziet er allemaal best strak uit!

Upgrade TailwindCSS 3 naar 4

Nu de belangrijke vraag: hoeveel tijd kost upgraden van TailwindCSS 3 naar 4? Naar verluid zou de upgrade minder dan 30 minuten tijd in beslag moeten nemen. Deze drie wijzigingen springen er wat ons betreft uit:

• PostCSS vervalt, Vite nieuwe standaard: kost eventueel wat tijd om platforms te migreren naar Vite, tailwind.config.js vervalt.
• Utilities vervallen: er zijn diverse utilities die vervallen zoals bg-opacity-*, text-opacity-* of overflow-ellipsis. Dit kan een hoop tijd kosten om in alle code te controleren en vervangen.
• Hover vervalt voor touch: Dit kan problemen opleveren als je app op een manier hebt gebouwd die afhankelijk is van touch-apparaten die hover op tap activeren.

Alle wijzigingen zijn gedocumenteerd, dus neem het gerust allemaal door!

Rechten van de afbeelding: https://tailwindcss.com/blog/tailwindcss-v4-beta.