Tailwind 4: Nieuwe features en verbeteringen

Utility classes veranderingen

Sommige utility classes bestaan niet meer of zijn aangepast om de consistentie te verbeteren binnen het framework. Een voorbeeld hiervan is dat in plaats van ‘bg-opacity-*’ we nu ‘bg-black/50’ zullen gaan gebruiken, aangezien de eerst genoemde nu verouderd en dus verwijderd is.

Daarnaast zijn er ook sizes aangepast voor bepaalde classes, zo is ‘shadow-sm’ naar ‘shadow-xs’ aangepast.

Via deze link is een lijst van de verwijderde classes te zien en via deze link een lijst van de aangepaste classes.

CSS-first configuratie

In plaats van aanpassingen in het tailwind.config.js bestand te plaatsen, wordt dit nu direct in het CSS-bestand geplaatst. Dit zorgt ervoor dat er 1 bestand minder in je project zit, maar ook dat alle CSS customizations in het CSS-bestand (input.css) zitten waar ook Tailwind wordt geïmporteerd.

Modern CSS features

CSS heeft verschillende nieuwe features die toegevoegd zijn sinds de lancering van Tailwind 3. Tailwind 4 maakt de volgende features ook mogelijk;

• Cascade layers (@layer): Dit zorgt voor meer controle over hoe stijlen overlappen en samenwerken.
• Geregistreerde custom properties (@property): Hiermee kun je animaties voor gradients maken en dynamische stijlen toepassen.
• color-mix() ondersteuning: Hiermee kun je kleuren mengen en transparantie eenvoudig aanpassen, inclusief CSS variables en ‘currentColor’.
• De @starting-style CSS at-rule wordt nu ook door Tailwind ondersteund. Hierdoor is het mogelijk om zonder JavaScript transitions mee te geven als een element wordt getoond.
• Er is nu ook ondersteuning voor de CSS ‘:not()’ pseudo-class, door ‘not-*’ te gebruiken. Hoe dit er bijvoorbeeld uit zou kunnen zien in een utility class is ‘not-hover:opacity-75’. Lees meer over de ‘:not()’ pseudo-class.

Overige verbeteringen

• Het installatieproces is vereenvoudigd en aangepast.
• Volledige code-builds zijn nu 5 keer sneller en tussentijdse builds zijn meer dan 100 keer sneller. Projecten die op Vite draaien hebben een nog betere performance dan POSTCSS.
• Automatische content detectie: Alle template files worden herkend zonder handmatige configuratie.
• Er zijn nieuwe utility classes toegevoegd, waardoor 3D transform animations ondersteund worden.
• Nieuwe gradient features: Het is nu mogelijk om bij linear gradient deze naar de hoeken te laten lopen, door gebruik van een class zoals bg-linear-45. Daarnaast is er ook ondersteuning voor conic en radial gradients!

Bestaand project overzetten naar versie 4

Om de migratie makkelijker te maken, biedt Tailwind CSS een upgrade tool aan dat de meeste van de wijzigingen automatiseert en daarnaast een upgrade guide. Hier is de handleiding te vinden om dit met de tool of handmatig te doen en daarnaast is er ook een overzicht met hernoemde utility classes.

Aanvullende tips

1. Run de tool in een nieuwe Git branch, zodat de aanpassingen makkelijk na te lopen zijn.
2. Test je project goed in de browser om zeker te weten dat alles goed werkt.
3. Loop de hernoemde of verwijderde utility classes na in je project en vervang deze waar nodig.