Tailwind CSS voor webdevelopers

In tegenstelling tot populaire CSS frameworks als Bootstrap of Foundation, hanteert Tailwind een utility-first aanpak. Daar waar je in de meeste frameworks verschillende classes in je CSS moet voorzien voor de verschillende stijlen van bijvoorbeeld een knop, heeft Tailwind als doel om de context tussen stijl en inhoud beter van elkaar te scheiden. Dit doet Tailwind door een groot aantal utility classes te voorzien die je overal kan gebruiken.

Een voorbeeld van een opgemaakte knop in Bootstrap:

<button type="button" class= "btn btn-primary">Primary</button>

Hetzelfde voorbeeld in Tailwind:

<button class= "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Primary</button>

De meeste frameworks werken met vaste componenten, die elk een unieke context definiëren (denk aan de BEM naming convention). Daarnaast genieten ze van hele specifieke en herkenbare stijlen, meestal in combinatie met terugkerende utility stijlen. Hierdoor oogt het resultaat dikwijls zeer gelijkaardig en krijg je het ‘Bootstrap' effect. Websites of applicaties lijken hierdoor sterk op elkaar omdat ze onderliggend allen met hetzelfde framework gebouwd zijn.

Daarnaast ontstaat er ook veel dubbele code als je veel gelijkaardige componenten bouwt die toch net iets anders moeten fungeren. Het idee achter Tailwind is om de classes zodanig te versimpelen dat elke class een klein deeltje unieke functionaliteit bevat, die overal gebruikt kan worden.

Op die manier schrijf je bijna al je stijlen inline, op basis van de voorgedefinieerde Tailwind waardes. Je hebt met Tailwind ook de optie om deze toch nog te overschrijven in de globale configuratie van Tailwind.

Omdat Tailwind enkel utility classes gebruikt, zijn er niet echt typische ‘componenten’ zoals in andere frameworks. Tailwind voorziet op haar website wel een mooi overzicht van voorbeelden van Tailwind componenten, zodat je meteen kan zien hoe ze er (in code) zouden uitzien als ze gemaakt worden op basis van het Tailwind framework. Deze voorbeeld componenten kunnen gemakkelijk overgenomen en naar believen aangepast worden.

Hieronder zie je een voorbeeldje van een typische 'Card' component, opgemaakt met Tailwind utility classes. De extra CSS is niet relevant en zorgt enkel voor wat extra styling om het voorbeeld beter te demonstreren:

Omdat Tailwind enkel gebruik maakt van utility classes is de lijst aan mogelijkheden lang, gaande van alles betreffende layout over typografie tot kleuren, ... Zelfs pseudo classes kunnen uniek worden toegewezen. Dit allemaal vanuit een mobile first mindset.

Elke mogelijke CSS toepassing is een unieke Tailwind class. Dit zorgt voor een bijna oneindige lijst aan opties, die jammer genoeg zeer moeilijk te onthouden valt. Gelukkig kan je voor je IDE een suggestion plugin installeren die je helpt bij het selecteren van de juiste utility classes.

Voordelen van Tailwind

• Snel en gemakkelijk, zowel in het opzetten als in gebruik
• De grote reeks voorgedefinieerde waardes kunnen via config files gemakkelijk aangepast worden
• De meeste CSS benodigdheden zijn voorzien waardoor de nood aan extra classes laag is
• Goede documentatie en bestaande plugins (met autocomplete) voor je IDE

Nadelen van Tailwind

• De leercurve: de lijst van stijlen is erg lang en soms is het even zoeken naar de juiste benaming
• Als je liever al je stijlen zelf definieert in CSS via @apply, voelt het eerder omslachtig aan
• Tailwind is een PostCSS plugin en hierdoor is de combinatie met SASS/LESS wat puzzelen (maar wel mogelijk)
• Zeer schaalbaar tot een bepaald niveau, zoals bij zeer grote applicaties, waar dan het gebruik van extra custom CSS noodzakelijk wordt
• Indien je sommige classes niet zou gebruiken, zorgen die voor een onnodige overhead

Wanneer maak je best gebruik van Tailwind in plaats van Bootstrap of een ander framework?

Als je graag snel resultaten wilt en een stevige ervaring hebt in werken met CSS, is een utility framework absoluut een optie. Ook developers, die zelf geen echte experts zijn in CSS kunnen dit framework gemakkelijk gebruiken om snel een sterk en volledig op maat resultaat neer te zetten.