hamburger menu
dot zwarte bel

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

Tailwind CSS is een gemakkelijk aanpasbare, minimale CSS framework die jou alle mogelijkheden geeft om een op maat gemaakt design te bouwen zonder irritante stijlen die je zou moeten overschrijven.

De meeste CSS frameworks doen te veel.

Ze komen met allerlei vooraf opgezette stijlen met als voorbeeld headers, footers en knoppen die jou in het begin een snelle start kunnen geven, maar met een eigen ontwerp is dit juist niet waar je naar opzoek bent en kan dit tot veel problemen lijden.

Tailwind is anders.

Inplaats van vooraf opgezette components, gebruikt Tailwind efficiënte css classes waardoor je je eigen design compleet kan opbouwen zonder je HTML ooit nog te verlaten.

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 kan programmeren!
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 4 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 voor 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 als 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

Bestandsgrootte besturen

Strategieën om uw gegenereerde CSS klein en performant te houden.
Met het gebruik van de standaard configuratie 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 van zal gebruiken. Een voorbeeld hiervan is, Tailwind genereert 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 en verwijderd 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é