hamburger menu
dot zwarte bel

Een efficiënt CSS framework voor het snel opzetten van op maat gemaakte websites

Wil je een op maat gemaakt design bouwen, zonder allerlei irritante stijlen die je moet overschrijven? Dan is Tailwind CSS de oplossing. Het is een gemakkelijk aanpasbaar, minimaal CSS framework dat jou al die mogelijkheden biedt. 

De meeste CSS frameworks doen te veel

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. Dat kan leiden tot veel problemen. 

Tailwind 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 allemaal standaard Tailwind classes. Dit is dus de manier waarop je veel sneller kunt programmeren! Check ook de Tailwind CSS Cheat Sheet.

Als je het beu bent om tegen het framework te vechten en ongewenste stijlen te moeten overschrijven, dan is Tailwind voor jou gemaakt.

Development

Responsive

Alle Tailwind classes hebben een responsive variant, waardoor 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.

Voorbeeld:
<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.

Meer lezen over responsive Tailwind

Hoe houd je de gegenereerde CSS klein en performance-gericht?

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

Tailwind Bestandsgrootte

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.

Ongebruikte CSS verwijderen

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.

Meer over Purgecss



Handige links

Tailwind CSS installatieTailwind CSS + Webpack starter project
Purgecss
Tailwind CSS Cheat Sheet
Responsive Tailwind

Meer weten over Craft CMS?

We helpen je graag verder. Aan de hand van jouw wensen bepalen we of Craft CMS de beste oplossing is. Maak vrijblijvend een afspraak!  

Cookie-instellingen
Om je beter en persoonlijker te helpen, gebruiken wij cookies en vergelijkbare technieken. Met de cookies volgen wij en derde partijen jouw internetgedrag binnen onze site. Hiermee tonen we advertenties op basis van jouw interesse en kun je informatie delen via social media. Als je verdergaat op onze website gaan we ervan uit dat je dat goedvindt. Meer weten?

Oké