Wat is TailwindCSS?

Elke applicatie die we voor mensen ontwikkelen heeft een bepaalde vorm van front-end. Het deel waar mensen kunnen interacteren met de applicatie. Een duidelijke UX en UI is noodzakelijk. Er zijn veel manieren om een front-end te ontwikkelen. Een bekend framework is bijvoorbeeld Twitter Bootstrap. Maar sinds een paar jaar is er een nieuwe speler op de markt: TailwindCSS.

In dit artikel vertellen we waarom Q2-software.nl enthousiast gebruiker is geworden van TailwindCSS:

• Wat is TailwindCSS?
• Wat zijn de core-features?
• Wat zijn de verschillen met Twitter Bootstrap?
• Integratie met Laravel 8+
• TailwindCSS moet je leren
• Playground

Wat is TailwindCSS?

TailwindCSS is eigenlijk een CSS-framework dat in de eerste plaats bedoeld is om een consistente UI te ontwikkelen. Het framework zorgt er bijvoorbeeld voor dat je margins en paddings overal consitent gebruikt worden. Dit doen ze met een eigen ontwikkeld rekenmodel waarbij er stapsgewijs verschillende maten beschikbaar zijn.

In de tweede plaats is het bedoeld zodat je zo weinig mogelijk CSS hoeft te schrijven. Je hoeft alleen maar classes toe te voegen. Dit is een fundamenteel andere benadering dan Twitter Bootstrap, wat ook een veel gebruikt CSS-framework is.

Wat zijn de core-features van TailwindCSS?

De core-features van TailwindCSS zijn:

• Utility-first fundementals
• Focus op pointer-states (zoals hover of focus)
• Responsive design
• Dark Mode
• Hergebruiken van stijlen
• Eenvoudig aanpassen van bestaande stijlen of toevoegen van eigen stijlen
• Functions & Directives

Utility-first fundementals

Utility-first betekent letterlijk vertaald nut-eerst. Het primaire doel is dat de classes duidelijk benoemd worden zodat de meeste developers het direct begrijpen. Noem het doelgericht. Frameworks die voor utility-first gaan niet zozeer voor het vergemakkelijken van CSS maar ondersteunen vooral in designkeuzes, zoals bijvoorbeeld het beperken van mogelijkheden in spacing.

De mensen van TailwindCSS schrijven op hun website over het doel van het framework. Ze willen het zelf schrijven van CSS stoppen. Hiervoor hebben ze drie redenen:

1. Je verspilt geen tijd en energie voor het bedenken van class namen,
2. Je krijgt geen enorm groot CSS bestand,
3. Veranderingen doorvoeren voelt veiliger.

Tijd verspillen voor het verzinnen van class-namen is hooguit de eerste paar keer, maar daarna leer je je vanzelf namen aan. Een groot CSS bestand kan je ook opgelosen als je SCSS of Sass gebruikt (maar wel met de voorwaarde dat je alles vanaf scratch opbouwt). Veranderingen doorvoeren voelt veiliger; volgens mij is dat een mening, maar ze hebben een punt dat CSS geen overzicht geven van wat de impact van een wijziging is. Als je alle utilities op het specifieke element hebt gebruikt weet je wat je aanpast. Persoonlijk vind ik de gegeven redenen dus niet erg sterk, maar dat neemt mijn enthousiasme over TailwindCSS niet weg!

”Waarom niet gewoon inline stijlen gebruiken?” Dat is een reactie die je veel leest en misschien was dit ook jouw reactie. Het voordeel van de utilities is dat ze ook gebruik kunnen maken van pointer-states (verderop meer hierover), alle classes zijn vooraf gedefinieerd (je zult niet per ongeluk 1px verschil maken) en je kunt mediaqueries gebruiken.

Componenten i.p.v. plain HTML

Mijn ervaring leert dat TailwindCSS er wel bij vaart als je je webpagina’s opbouwt met componenten. Een knop is dus niet <button class="..."></button> maar <buttonComponent />. Het component verwijst naar een bestand waarin uitgeschreven is hoe de button eruit ziet. Componenten zijn eenvoudig te onderhouden, want qua stijlen zit alles nu in één HTML-bestand per component! Later in dit artikel nog meer hierover.

Focus op pointer-states (zoals hover of focus)

Een state is de status waarin een element, website of device zich bevind. Bijvoorbeeld als je over een button hovert veranderd de status van de button in :hover. Statussen kunnen een bredere context hebben. Bijvoorbeeld hoe een element zich verhoudt tot een ander element. Is het het eerste element van een rij: :first-child. Of nog bredere context. Vraagt het apparaat waarop de bezoeker werkt om de Dark Mode?

Er zijn ongeveer 50 verschillende statussen te gebruiken. hover: en focus: heb ik al genoemd, maar wat dacht je van dark: voor wat er in Dark Mode moet gebeuren, of first-child: als je het eerste element uit een lijst wilt selecteren, of disabled: om een input te stylen als die niet actief is? Bekijk alle 50+ states.

Responsive design

TailwindCSS heeft naast de states waar we het net over hadden ook directe implementatie van responsive design. TailwindCSS gaat uit van mobile-first. Dat betekent dat media-queries kijken of het scherm breder is dan een bepaald aantal pixels: “Standaard ziet het er zo uit MAAR als het scherm groter is dan X pixels moet ik wat anders laten zien.”

De standaard breakpoints zijn sm: 640px, md: 768px, lg: 1024px, xl: 1280px en 2xl: 1536px, maar je bent volledig vrij om dit te wijzigen in bijvoorbeeld tablet: 768px, desktop: 1280px.

Dark Mode

Steeds meer ‘normale’ gebruikers beginnen te wennen aan Dark Mode omdat hun devices deze optie aanbieden. Het is dan wel zo fijn dat het internet daarin meegaat.

TailwindCSS heeft een handige functie om dit te implementeren. Je kunt automatisch switchen op basis van de instelling van het device of handmatig met een class op de body van je website.

Hergebruiken van stijlen

Bij Twitter Bootstrap ben je gewend simpel een button te kunnen plaatsen. Je geeft dan de class btn btn-primary mee en klaar is Kees. In TailwindCSS lijkt dit omslachtiger. Je moet alle opties op elke button meegeven: px-4 py-2 uppercase text-center bg-blue-400 text-white .... Als je een front-end framework gebruikt of ontwikkeld is het geen probleem. Dan zet je deze classes 1x in het component en dan is Kees ook klaar. Als je geen componenten gebruikt heeft Tailwind nog een trick up his sleeve: @apply.

.btn {
    @apply px-4 py-2 uppercase text-center bg-blue-400 text-white;
}

Nu kan je deze class gebruiken op de button. Je hebt volledige vrijheid als het gaat om de styling. Je hoeft geen Bootstrap stijlen te overschrijven waardoor je overbodige CSS voorkomt.

Wat zijn de verschillen tussen TailwindCSS en Twitter Bootstrap?

De verschillen tussen TailwindCSS en Twitter Bootstrap zijn eindeloos. Het is hetzelfde als op maat gezaagd hout vergelijken met een kast. TailwindCSS is dan het hout en Bootstrap de kast. Ik zal uitleggen hoe dit zit.

Zoals gezegd is TailwindCSS Utility first. Bijna alle CSS opties zijn omgezet in classes. Hierin is enige consistentie aangebracht waardoor je bijvoorbeeld niet per ongeluk de ene keer 7px padding gebruikt en de volgende keer 9px. In plaats daarvan gebruik je p-3. Dit vertaalt naar bijvoorbeeld 9px. Uiteraard moet je wel bedachtzaam omgaan met p-1, p-2, p-3, enzovoort, maar bedachtzaamheid is sowieso belangrijk bij programmeren.

Integratie met Laravel 8+

TailwindCSS is standaard sinds Laravel 8 meegeleverd in diverse Laravel starter kits. Denk aan Laravel Jetstream en Laravel UI.

TailwindCSS moet je leren

Ja, je leest het goed. TailwindCSS is niet zo recht toe recht aan als bijvoorbeeld Bootstrap. Je moet er echt een paar weken mee werken voordat je begrijpt hoe het werkt. En dat vergt doorzettingsvermogen. Doordat alles Utility-first is opgezet moet je eigenlijk zelf een beetje expert in CSS zijn zodat je begrijpt wat de mogelijkheden en oplossingen zijn in bepaalde situaties. Hierdoor wordt het googlen naar een oplossing ook moeilijker omdat de termen veel direct afgeleid zijn van CSS.

Dus dan maar niet gebruiken? Die keuze laat ik aan jou. Ik was in ieder geval wel overtuigd na het bekijken van een paar filmpjes over bijvoorbeeld een grid of scroll snap.

Playground

De TailwindCSS playground is dan wel een toffe toevoeging. Dit is een website waarbij je kunt spelen met styling. Het maakt niet uit of je alleen komt om het te testen, of dat je hele componenten wilt bouwen.