De kern van deze update is een grondige herziening van hoe Tailwind CSS werkt. Waar eerdere versies vooral focusten op het uitbreiden van functionaliteit, richt versie 4 zich op het optimaliseren van de onderliggende architectuur. Het resultaat? Een framework dat tot 10 keer sneller is dan zijn voorganger, met een 35% kleinere footprint en een verbeterde ontwikkelaarservaring die beter aansluit bij moderne webstandaarden.
Tailwind CSS v4: 10x sneller met nieuwe Oxide engine
De volgende revolutie in het populaire CSS framework met focus op snelheid, simpliciteit en een moderne developer experience
Tailwind CSS v4: De volgende evolutie in moderne webontwikkeling
In de wereld van moderne webontwikkeling heeft Tailwind CSS zich gevestigd als een van de meest populaire CSS frameworks. Met de aankondiging van versie 4.0 zet het framework een grote stap voorwaarts in prestaties, gebruiksgemak en moderne webtechnologieën. Deze nieuwe versie, die volledig is herschreven met de nieuwe Oxide engine, belooft niet alleen een drastische versnelling in ontwikkeltijd, maar introduceert ook een meer natuurlijke, CSS-gerichte benadering van styling.
Auteur: Allard Rothengatter
Gepubliceerd: 12 december, 2024
Tailwind CSS v4: de update
De nieuwe Oxide engine: gebouwd voor snelheid
Het kloppend hart van Tailwind CSS v4 is de nieuwe Oxide engine, een compleet herontworpen fundament dat is geschreven in Rust. Deze fundamentele verandering brengt indrukwekkende prestatieverbeteringen met zich mee die direct merkbaar zijn in het dagelijkse ontwikkelproces.
De cijfers spreken voor zich: waar het bouwen van de Tailwind CSS website voorheen 960ms duurde, is dit nu teruggebracht naar slechts 105ms. De Catalyst UI kit wordt zelfs nog sneller verwerkt: van 341ms naar 55ms. Deze versnelling is niet alleen merkbaar bij grote projecten - ook kleinere websites profiteren van de verbeterde prestaties.
Rust als basis
De keuze voor Rust als programmeertaal voor kritieke onderdelen van het framework is strategisch. Rust staat bekend om zijn snelheid en efficiëntie, terwijl de kern van het framework in TypeScript blijft voor maximale uitbreidbaarheid. Deze hybride aanpak zorgt voor:
Compact
Een 35% kleinere installatie-footprint
Optimalisatie
Betere parallelisatie van processen
Snelheid
Een op maat gemaakte CSS parser die 2x sneller is dan PostCSS
Onafhankelijk
Minimale afhankelijkheden - alleen Lightning CSS is vereist
Een nieuwe frontend ervaring
Ervaring
Een gestroomlijnde ontwikkeling
De nieuwe ontwikkelaarservaring
Tailwind CSS v4 transformeert van een puur CSS framework naar een complete, geïntegreerde oplossing voor het verwerken van je CSS. Door de integratie van Lightning CSS direct in het framework wordt de configuratie van je CSS pipeline aanzienlijk vereenvoudigd.
De nieuwe versie maakt korte metten met de noodzaak voor verschillende losse tools en plugins. Waar je voorheen externe configuratie nodig had voor basisfunctionaliteit, zijn deze nu standaard beschikbaar in het framework. Het automatisch verwerken van @import statements gebeurt nu zonder extra setup, vendor prefixing wordt automatisch toegepast, en er is native ondersteuning voor geneste CSS.
Intelligent
Automatische detectie
Zero-configuration workflows
Een van de meest opvallende verbeteringen is de intelligente manier waarop Tailwind je projectbestanden verwerkt. Het framework vindt zelf je template bestanden, waarbij het slim gebruik maakt van projectstructuren. Het scant je project automatisch, houdt rekening met uitgesloten mappen in je .gitignore, en werkt naadloos samen met moderne build tools zoals Vite.
Dit betekent dat je in veel gevallen geen handmatige configuratie meer nodig hebt voor het aangeven waar je template bestanden zich bevinden. De nieuwe aanpak zorgt voor een soepelere workflow waarbij ontwikkelaars zich kunnen focussen op het bouwen van hun applicatie in plaats van het configureren van hun tools.
Moderniteit
CSS-first aanpak
Intuïtieve configuratie
Met versie 4 omarmt Tailwind een meer natuurlijke, CSS-gerichte aanpak. In plaats van uitgebreide JavaScript configuraties maak je nu gebruik van native CSS variabelen en @theme directieven. Dit zorgt voor een meer intuïtieve manier van werken die direct aansluit bij moderne CSS practices:
@import "tailwindcss";
@theme {
--font-family-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 1920px;
--color-neon-pink: oklch(71.7% 0.25 360);
}Deze benadering maakt het configureren van je styling niet alleen eenvoudiger, maar ook meer consistent met hoe moderne CSS werkt. Het stelt ontwikkelaars in staat om hun thema's en aanpassingen te definiëren op een manier die natuurlijker aanvoelt en beter past bij de huidige webstandaarden.
Nieuwe features & verbeteringen
Naast de verbeterde prestaties en ontwikkelaarservaring, introduceert Tailwind CSS v4 een aantal krachtige nieuwe features die de mogelijkheden van het framework verder uitbreiden.
Composable Variants
Een van de meest opvallende nieuwe mogelijkheden is de verbeterde composability van variants. Ontwikkelaars kunnen nu variants zoals group-*, peer-*, has-* en de nieuwe not-* variant vrijelijk combineren. Deze flexibiliteit maakt het mogelijk om complexere styling patterns te creëren zonder extra JavaScript. Bijvoorbeeld:
<div class="group">
<div class="group-has-[&:focus]:opacity-100">
<!-- Content -->
</div>
</div>Container Queries
Met de introductie van native container query ondersteuning wordt responsive design nog krachtiger. In plaats van alleen te reageren op de viewport grootte, kun je nu styling aanpassen op basis van de grootte van een container element:
@container (min-width: 800px) {
.sidebar {
width: 15%;
}
}Verbeterde Kleurmanipulatie
De nieuwe versie maakt gebruik van moderne CSS features zoals color-mix voor opacity modifiers, waardoor het werken met kleuren en transparantie intuïtiever wordt. Dit is vooral handig bij het gebruik van CSS variabelen voor kleuren of het aanpassen van de opacity van currentColor.
Tailwind CSS v4 markeert een keerpunt in moderne webontwikkeling: waar prestaties en gebruiksgemak samenkomen. Met de nieuwe Oxide engine bouwen we niet alleen sneller, maar ook slimmer.
– Adam Wathan, Tailwind CSS
Belangrijke wijzigingen & migratie
De upgrade naar Tailwind CSS v4 brengt een aantal belangrijke wijzigingen met zich mee. Zo zijn er verschillende verouderde utilities verwijderd, waaronder text-opacity-*, flex-grow-* en decoration-slice, die zijn vervangen door modernere alternatieven.
Een significante architecturale verandering is de opsplitsing van het framework in aparte packages. De PostCSS plugin en CLI tools zijn nu gescheiden van het hoofdpakket, wat betekent dat deze apart geïnstalleerd moeten worden. Ook zijn er aanpassingen gedaan aan standaardwaarden: de border utility heeft geen standaardkleur meer en de ring utility is standaard 1px geworden in plaats van 3px.
Voor een soepele migratie is het belangrijk om eerst de packages bij te werken, vervolgens de configuratie aan te passen en ten slotte je applicatie grondig te testen op eventuele breaking changes.
Het fundament voor de toekomst
Tailwind CSS v4 vertegenwoordigt een significante stap voorwaarts in de evolutie van het framework. De volledige herschrijving met de Oxide engine, gecombineerd met de moderne ontwikkelaarservaring en nieuwe features, maakt deze versie tot een krachtige upgrade voor zowel nieuwe als bestaande projecten.
Met een roadmap die zich uitstrekt tot na de zomer van 2024, blijft het team achter Tailwind CSS bouwen aan verdere verbeteringen. De focus ligt daarbij op het verfijnen van de ontwikkelaarservaring en het toevoegen van ondersteuning voor de nieuwste web standaarden.
Voor ontwikkelaars die overwegen om te upgraden, biedt v4 overtuigende voordelen: significant betere prestaties, een meer intuïtieve configuratie-ervaring en moderne features die het ontwikkelproces versnellen. Hoewel de alpha-versie al beschikbaar is voor experimentele doeleinden, is het aan te raden om voor productieomgevingen te wachten op de stabiele release die later dit jaar verwacht wordt.
Nog meer interessant leesvoer
De Laravel TALL stack: Efficiëntie, flexibiliteit en innovatie in softwareontwikkeling
4 sep. 2024 door Johan Zandstra
Bij het ontwikkelen van software speelt de keuze van de tech stack een cruciale rol. De Laravel TALL stack –bestaande uit Tailwind CSS, Alpine.js, Laravel, en Livewire– biedt een moderne, efficiënte oplossing die zowel ontwikkelaars als opdrachtgevers grote voordelen biedt. Van verbeterde ontwikkelsnelheid tot lagere kosten en grotere flexibiliteit: de TALL stack zorgt voor een gestroomlijnde samenwerking en snellere oplevering van hoogwaardige softwareproducten. In dit artikel verkennen we hoe deze stack waarde creëert voor beide partijen.
Maatsoftware hoeft niet duur of complex te zijn
6 mei 2024 door Alan Linnenbank
Het vinden van de juiste software die perfect aansluit bij de unieke eisen van jouw bedrijf is cruciaal, maar kan uitdagend zijn. Maatwerksoftware biedt oplossingen die specifiek zijn afgestemd op jullie behoeften, maar komt ook met nadelen. Bij Dolphiq erkennen en herkennen we deze uitdagingen en hebben we op basis van onze jarenlange ervaring Qore.works ontwikkeld, om deze uitdagingen effectief aan te pakken. Door middel van onze agile aanpak kunnen we flexibel en efficiënt aan jouw softwarebehoeften voldoen. Hieronder lees je hoe we te werk gaan en geven we je inzicht wat maatwerk kost.