Tailwind CSS: Wie / Wat / Waarom?

Wanneer je iets creëert online wil je ervoor zorgen dat je website/applicatie of product aantrekkelijk oogt, gebruiksvriendelijk is maar bovenal ook te onderhouden valt voor de developer. Vandaar dit artikel over Tailwind, aangezien dit volgens mij alle bovenstaande punten voldoet. Indien je het met zorg gebruikt.

Tailwind is een utility-first css framework. Dit betekent dat je in plaats van normale css code te schrijven, je gebruik maakt van utility classes op je HTML elementen. Dit laat je toe om dezelfde classes te hergebruiken doorheen je applicatie. Hierdoor wordt zelf css schrijven (zo goed als) overbodig en zal je vooral bij grotere webapplicaties ook minder grote files creëren. Wat op zijn beurt dan weer zorgt voor snellere laadtijden.

<button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type=“submit">
  Buy now
</button>

Laten we even kort uitleggen wat dit nu concreet betekent. Je ziet in bovenstaand voorbeeld 6 utility-classes. Elke class heeft zijn eigen css variant(en).

• h-10 = height: 2.5rem;
  h duidt aan dat het gaat om de height en de 10 om de grootte van die height.

• px-6 = padding-left: 1.5rem; padding-right: 1.5rem;
  p staat voor padding, x staat voor op de x-asis (links, rechts) en 6 opnieuw voor de grootte.

• font-semibold = font-weight: semibold;
  Deze legt zichzelf vrij duidelijk uit, font duidt aan het over tekst gaat en semibold dat het over een bepaalde weight van de tekst gaat.

• rounded-md = border-radius: .375rem;
  rounded slaat hier op het feit dat de hoeken van het element afgerond zijn. De md slaat dan op de mate waarin ze afgerond zijn. Zo heb je sm, md, lg, xl, 2xl, …

• bg-black = background-color: black;
  Ook vrij duidelijk bg staat voor achtergrond, black voor het kleur.

• text-white = color:white;
  Nog een duidelijke class, text duid aan dat het om de tekst gaat en white om het kleur.

Als je naar bovenstaande uitleg kijkt zie je al snel dat de meeste classnames snel herkenbaar zijn en ook quasi altijd korter zijn dan hun css counterparts. Dit zorgt ervoor dat je dus ook veel sneller iets kan testen, aanpassen zonder hiervoor in een aparte css file of in de inline css te gaan zoeken. Zelfs met andere manieren van werken zoals BEM-notatie zal je nooit sneller aanpassingen kunnen doen dan gewoon rechtstreeks in de html.

Een ander voordeel is het stroomlijnen van ruimtes, font-sizes, etc. doorheen uw webapplicatie. Zo heb je ook een tailwind config file. Deze laat je toe om values te overschrijven en toe te voegen. Het is ook mogelijk om in uw classes custom varianten te maken die je bijvoorbeeld maar 1x nodig hebt waardoor het niet nodig is om er een nieuwe utility-class voor te maken. Bijvoorbeeld  h-[25px]  zorgt er dan voor dat je een height van 25px meegeeft aan je element.

Nu we concreet weten hoe Tailwind werkt, is het ook duidelijk dat de leercurve vooral bestaat uit het herkennen en vlot gebruiken van de utility-classes. Gelukkig zijn deze vrij intuïtief gekozen waardoor de transitie van normale css naar Tailwind vaak erg vlot kan verlopen. 

Tailwind is een low-level CSS framework. Wat dit concreet betekent is dat het in tegenstelling tot andere CSS frameworks zoals Bootstrap of Materialize geen volledige gestileerde componenten heeft. Je bouwt je elementen volledig zelf op met traditionele css enkel aan de hand van de classes die Tailwind voorziet.

Hierdoor zullen de zaken die je maakt met Tailwind unieker en flexibeler zijn dan met andere css frameworks. Je hebt namelijk zelf de macht over hoe alles eruit zal komen te zien.

• Je schrijft minder custom CSS. Door enkel en alleen de utility classes van Tailwind te gebruiken kan je alles stylen zoals je zelf wilt zonder zelf echt CSS hoeven te schrijven.

• Je CSS bestanden blijven klein. Zonder een CSS framework moet je alles custom schrijven waardoor CSS files vrij groot kunnen worden. Door de herbruikbaarheid van de Tailwind classes zal je amper nog css files moeten aanraken.

• Je moet geen classes uitvinden. Tailwind heeft zijn eigen class structure waardoor je je tijd niet moet spenderen met het uitvinden van de perfecte classname die weergeeft wat het voorstelt. Als alles goed is dan kan je dit namelijk afleiden vanuit je semantisch correcte HTML elementen.

• Je kan veiligere aanpassingen doorvoeren. Met de traditionele aanpak kan het zijn dat wanneer je je css aanpast dat je onverwacht op andere plaatsen ook veranderingen doorvoert. Met Tailwind zie je direct op welk element je je css aanpast zonder schrik te moeten hebben dat je dit op andere locaties mee veranderd.

• Het kan geoptimaliseerd worden door PurgeCSS. Het laat je toe om ongebruikte classes te strippen uit je codebase waardoor er nog extra ruimte vrijgemaakt kan worden om de laadtijden van uw pagina’s te verminderen.

Tailwind laat je toe om snel en flexibel complete UI’s uit te werken die overigens volledig responsive en dynamisch kunnen zijn op basis van de acties van de gebruiker. Het zorgt ervoor dat je css files klein blijven van formaat en wanneer je je utility-classes ordelijk rangschikt kan het toch ook overzichtelijk blijven.

Bovendien zal je nooit geen onverwachte veranderingen op andere pagina’s of in andere componenten doorvoeren doordat je altijd specifiek het aan te passen element aanspreekt en niet een algemene class die ergens anders hergebruikt wordt.

Het zorgt er ook voor dat het bijna volledig overbodig wordt om custom css te schrijven doordat bijna elke css property een Tailwind tegenhanger heeft die vaak korter is en dus makkelijker te onthouden dan de traditionele variant.