Tailwind CSS voor webdevelopers

Wanneer je een op maat gemaakt design wilt bouwen, wil je niet te maken krijgen met allerlei vooraf opgezette stijlen vol headers, footers en knoppen. Ja, ze zijn er misschien om jou een snelle start te geven, maar met een eigen ontwerp is dat precies wat je niet wilt. Vooropgezette stijlen kunnen tot veel problemen leiden.

Tailwind CSS is anders. In plaats van al die componenten die al voor je opgezet zijn, gebruikt Tailwind efficiënte CSS classes, waardoor je je eigen design compleet kan opbouwen zonder je HTML ooit nog te verlaten. Check dit voorbeeld:

<div class="container flex flex-wrap justify-center items-center my-20">
 <div class="lg:w-1/2 w-full mx-auto">
 <p class="font-bold">Lorum ipsum easum</p>
 </div>
</div>

De classes die in het voorbeeld worden gebruikt zijn stuk voor stuk standaard Tailwind classes. Dit is dus de manier waarop je veel sneller kunt programmeren! Bekijk ook de Tailwind CSS Cheat Sheet. Ben jij klaar met vechten tegen het framework en het overschrijven van ongewenste stijlen? Dan is Tailwind voor jou gemaakt.

Alle Tailwind classes hebben een responsive variant waarmee je extra snel een mobiele versie kan opbouwen zonder custom CSS te gebruiken. Er zijn vier standaard breakpoints, gericht op de meest gebruikte apparaten en natuurlijk mobile first:

/* Mobiel (sm) */
@media (min-width: 640px)

/* Ipad (md) */
@media (min-width: 768px)

/* Laptop(lg) */
@media (min-width: 1024px)

/* Groot scherm (xl) */
@media (min-width: 1280px)

Om een responsive utility toe te voegen, moet je de class prefixen door een breakpoint naam mee te geven en daarachter een : teken te zetten. Bijvoorbeeld:

<div class="block lg:justify-center lg:flex">
 <p>Niice!</p>
</div>

Zo zal de div een display flex en justify-center krijgen op grotere schermen dan 1024px. Als het scherm kleiner wordt, zal de justify-center verdwijnen en zal de display flex veranderen in display block.

Met het gebruik van de standaardconfiguratie zal Tailwind CSS verkleind en gzipped een grootte van 58.1kb hebben.

Wanneer je de frameworks in het bovenstaande tabel vergelijkt, ziet Tailwind er relatief groot uit. Maar er zijn manieren om de bestandsgrootte drastisch te verlagen.

Wij zelf maken in onze projecten gebruik van Purgecss. Dit is een tool voor het verwijderen van ongebruikte CSS. Purgecss heeft een zeer effectieve werking als je het gebruikt met Tailwind, want Tailwind maakt een hele lading classes aan waarvan je misschien de helft maar zal gebruiken. Tailwind genereert bijvoorbeeld margin classes in allerlei formaten, voor elke kant van een element, en daarnaast ook nog eens responsive. Zo heb je wel meer dan honderd combinaties tot beschikking, maar je zult ze niet allemaal nodig hebben. Hier komt Purgecss in actie: het verwijdert alle classes die je niet gebruikt in je HTML-code!

Door gebruik te maken van Tailwind CSS in combinatie met Purgecss zal het erg moeilijk zijn om te eindigen met meer dan 10kb gecomprimeerde CSS.