Nieuwe features in TailwindCSS 4 en DaisyUI 5

Op 22 januari 2025 is TailwindCSS v4 eindelijk gereleased! Na drie jaar lang te werken met TailwindCSS 3, zijn er een heleboel verbeteringen en nieuwe features toegevoegd waar veel ontwikkelaars enthousiast over zullen zijn. En alsof dat nog niet genoeg is, staat de release van DaisyUI v5 gepland voor 1 maart 2025. Deze nieuwe DaisyUI versie zal ook nog eens naadloos samenwerken met de nieuwe Tailwind versie! Hierover lees je meer in een aparte blog.

Wat betekent dit voor jouw website?

Met de nieuwste versies van TailwindCSS en DaisyUI kunnen we de voorkant van jouw website of applicatie nog sneller, mooier en efficiënter bouwen. Dit betekent kortere ontwikkeltijden, moderne designs die perfect werken op alle apparaten, en een nog betere gebruikerservaring. Dankzij deze tools kunnen we flexibel te werk gaan en een resultaat leveren dat niet alleen visueel aantrekkelijk is, maar ook technisch goed in elkaar steekt.

Wil je weten wat deze verbeteringen voor jouw project kunnen betekenen? Neem gerust contact met ons op.

Belangrijkste aanpassingen in Tailwind 4

TailwindCSS 4 brengt een heleboel aanpassingen en verbeteringen met zich mee. In de changelogs van de nieuwe versie worden veel wijzigingen benoemd. Hieronder staan de belangrijkste op een rijtje:

1. Snellere rebuilds: Het rebuilden van je CSS bestand is nu tot 3,5 keer sneller voor volledige builds en zelfs 8,5 keer sneller voor incrementele builds!
2. Eenvoudigere import: Je hoeft nu niet meer de base, components, en utilities apart in te laden. Alles wordt ingeladen met een simpele @import "tailwindcss";.
3. Automatische contentdetectie: Je hoeft niet meer handmatig op te geven welke bestanden Tailwind gebruiken. Alles wordt automatisch gedetecteerd. Wil je toch een extern bestand includen, gebruik dan @source(../jouw-folder) in je CSS bestand.
4. Vite integratie: Tailwind werkt nu ook met Vite, wat zorgt voor betere performance dan de oude PostCSS-integratie.
5. Configuratie via CSS: Het oude tailwind.config.js bestand is verleden tijd. Alle aanpassingen kunnen nu direct in het CSS bestand, waar je Tailwind importeert, worden gedaan.
6. Meer vrijheid met willekeurige waarden: In plaats van opacity-[75] kun je nu direct opacity-75 gebruiken. Dit geldt voor verschillende utilities zoals grid-cols, maar ook voor spacing-utilities zoals w, h, m en p.
7. Container queries: Deze zijn nu standaard beschikbaar bij het installeren van Tailwind, je hoeft dus geen aparte plugin meer te installeren.
8. Field-sizing: Je textarea past automatisch zijn grootte aan op basis van de inhoud. Voeg hiervoor de field-sizing-content class toe aan je element.
9. Algemene verbeteringen: Betere ondersteuning voor kleuren, gradiënten en 3D-effecten.

Upgrade tool: Tailwind biedt een handige upgrade tool om eenvoudig te upgraden van versie 3 naar versie 4, zodat je geen tijd hoeft te verliezen met handmatige aanpassingen.

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