Studio Terabyte is een fullstack web development studio die oplossingen vindt en bouwt passend bij uw project
Wat is Tailwind?
Tailwind is een utility-first CSS framework wat gebruikt maakt van HTML classes om je design direct in de HTML code op te bouwen. Je kunt bijvoorbeeld gemakkelijk de breedte, hoogte, achtergrondkleur, schaduwen en rondingen van hoeken door het volgende te doen:
<div class="w-96 bg-white shadow rounded">
Deze manier van CSS als HTML classes schrijven helpt met het volgen van vooraf gedefineerde kaders van je design systeem in plaats van verschillende stylesheets met arbitraire waardes te onderhouden. Dit maakt het makkelijker om consistent te blijven met de kleur keuzes, spacing, typografie, schaduwen en alle andere elementen die onderdeel zijn van een goed doordacht design systeem.
Tailwind heeft standaard ook geen styling. Dit houdt in dat, in tegenstelling to een framework zoals Bootstrap, je de volle controle hebt over het design van je project zonder dat je standaard styling moet overschrijven
Wat is er veranderd?
Een aantal dingen zijn veranderd in deze release van Tailwind zoals performance verbeteringen, meer configuratie opties en een set opwindende nieuwe features.
Just-In-Time compiler
Om de build times te verbeteren heeft het team achter Tailwind een nieuwe Just-In-Time compiler toegevoegd die voor build times van minder dan een seconden zorgt. Ook maakt de nieuwe compiler het mogelijk om elke variant direct beschikbaar te maken zonder verdere handmatige configuratie en arbitraire styling toe te voegen zonder zelf custom CSS te schrijven zoals top-[-113px].
Meer kleuren
Een ander voordeel van de nieuwe JIT compiler is dat er meer dingen kunnen worden toegevoegd aan Tailwind zonder drastisch de groote van de build te vegroten. Dit betekent dat het gehele kleurenpalet nu direct beschikbaar is.
Scroll snap API
Deze dagen is het meeste verkeer online van mensen die op hun mobiele telefoon zitten, wat betekent dat mobile first design de norm is en dat je altijd moet proberen een goede UX moet bouwen voor mobiele gebruikers. Tailwind kan je hiermee helpen doormiddel van de Scoll Snap API.
Deze nieuwe API maakt het mogelijk om aan te geven op welke plaats een afbeelding moet "snappen" wanneer een gebruiker horizontaal scrolt. Dit ziet er in de praktijk zo uit:
<div class="snap-x ...">
<div class="snap-center ...">
<img src="" />
</div>
<div class="snap-center ...">
<img src="" />
</div>
<div class="snap-center ...">
<img src="" />
</div>
<div class="snap-center ...">
<img src="" />
</div>
<div class="snap-center ...">
<img src="" />
</div>
<div class="snap-center ...">
<img src="" />
</div>
</div>
Hier een volledige werkend voorbeeld.
Moderne aspect ratio API
The Aspect Ratio API is een relatief nieuwe CSS property die steeds meer browser ondersteuning krijgt. Deze geeft je de optie een aspect ratio in te stellen voor een element zodat wanneer de breedte of hoogte veranderd, het element er niet uitgerekt uitziet.
In Tailwind 3 kun je dit op deze manier doen:
<iframe class="w-full aspect-video ..." src="https://www.youtube.com/..."></iframe>
Andere features
Naast de features hierboven beschreven, biedt de update meer dingen zoals:
- Colored box shadows
- Multi-column layout
- Native form control styling
- Print modifier
- Modern aspect ratio API
- Fancy underline styles
- RTL and LTR modifiers
- Portrait and landscape modifiers
- Arbitrary properties
Moet je nu updaten?
Ja. De nieuwe versie is sneller, heeft meer features en heeft maar een klein aantal breaking changes die je in gedachten moet houden wanneer je gaat upgraden. De officiele upgrade guide is een goede plek om te starten.
Als je een framework gebruikt zoals Nuxt (net als deze website) kan het zijn dat de officiele Tailwind plugin nog niet geupdate is om Tailwind 3 te ondersteunen. Als dit het geval is, is het de moeite waard om van de plugin af te stappen en direct de integratie te doen. Voor Nuxt kun je deze guide gebruikenen voor andere frameworks zoals Next.js kun je hier kijken.