Tailwind CSS, gemaakt door Adam Wathan, is een utility-first CSS-framework. In plaats van eigen CSS-regels in een apart stylesheet te schrijven, pas je kleine, eendoelige classes rechtstreeks toe in je HTML, zoals flex, p-4 of text-lg, en combineer je die tot elk gewenst design.
Wat Tailwind anders doet
Traditionele CSS betekende een component benoemen, een regel ervoor schrijven, en die regel onderhouden terwijl het design evolueert. Tailwind slaat die benoemstap volledig over: de styling staat naast de markup die ze beïnvloedt, waardoor meteen duidelijk is hoe een stuk HTML eruitziet, zonder tussen bestanden te moeten schakelen. De spacing, kleuren en typografie van een designsysteem worden één keer vastgelegd in een configuratiebestand en overal hergebruikt via die utility classes.
Waarvoor Tailwind goed is
Snel een consistent design bouwen zonder eigen CSS vanaf nul te schrijven
Een designsysteem centraal en makkelijk aanpasbaar houden
Teams die styling en markup samen willen houden in plaats van verspreid over aparte bestanden
De afweging
HTML met veel utility classes kan op het eerste gezicht rommelig aanvoelen, en er is een leercurve als je gewend bent om semantische, benoemde CSS-classes te schrijven. In de praktijk vinden de meeste teams die na een paar weken bij Tailwind blijven, die afweging de moeite waard.
Vulpo en Tailwind CSS
Tailwind is onze standaardaanpak voor styling in nieuwe projecten, samen met Laravel, Livewire en Alpine.js als de TALL stack. Zo blijft het designsysteem consistent doorheen een project, zonder de bouw te vertragen.
