Tailwind CSS is een vormgevingsframework waarmee je een webpagina ontwerpt door kleine classes met één doel direct in de markup te zetten. In plaats van een aparte stylesheet vol eigen regels te schrijven, stel je een look samen uit stukjes als flex, gap-4 en rounded-lg, precies daar waar het element staat.
Zie het als een bak standaard LEGO-stenen in plaats van een dichtgelijmd modelletje. Bootstrap geeft je afgewerkte onderdelen, een kant-en-klare knop, een kant-en-klare kaart, waardoor projecten op elkaar kunnen gaan lijken. Tailwind geeft je de stenen en jij bouwt wat je wilt, en daarom kiezen teams die om een eigen ontwerp geven er vaak voor. Het zit boven op gewone CSS en werkt netjes samen met responsive design via prefixes als md: en lg: die de stijl per schermgrootte aanpassen.
De aanpak heeft een leercurve. Markup met een stuk of tien classes op één element oogt in het begin rommelig, en wie van Bootstrap komt mist soms de vertrouwde benoemde classes. Maar die ruil levert echte snelheid op: je vormgeeft zonder ooit het HTML-bestand te verlaten of een nieuwe classnaam te verzinnen, en je vecht bijna nooit meer tegen specificiteitsbugs uit een uitdijende stylesheet.
Snelheid is een echte sterkte. Tailwind scant je bestanden en neemt alleen de classes mee die je daadwerkelijk gebruikt, dus de geleverde stylesheet blijft klein, vaak een paar kilobyte. Voor terugkerende patronen als een kaart of een knop verpak je de classes één keer in een component, zodat je niet overal dezelfde lange reeks plakt. Het is een standaardkeuze geworden in modern front-end-werk, ook op deze site.
Bij TopDevs bouwen we met Tailwind zodat klantsites een eigen, consistent ontwerp krijgen dat snel laadt en makkelijk te onderhouden blijft.
