Tailwind CSS

Tailwind CSS is een utility-first CSS-framework dat een pagina opmaakt met kleine klassen voor één doel die je direct in de HTML schrijft. Klassen zoals p-4, text-center en bg-blue-500 stellen elk één stijl in. Ontwikkelaars combineren deze klassen om elk ontwerp te bouwen zonder veel eigen CSS te schrijven.

Utility-first CSS betekent een ontwerp bouwen uit veel kleine klassen die elk één ding doen, in plaats van voor elk component een eigen klasse te schrijven. Een knop krijgt zijn uiterlijk van klassen voor padding, kleur, afgeronde hoeken en lettergewicht. Deze aanpak houdt stijlen dicht bij de opmaak en voorkomt grote stylesheets die blijven groeien.

Ontwikkelaars kiezen voor Tailwind CSS omdat het stylen versnelt en het uiteindelijke CSS-bestand klein houdt. Je hoeft geen klassenamen te verzinnen of bij elke wijziging te wisselen tussen HTML- en CSS-bestanden. Tailwind CSS geeft ook een vaste schaal voor witruimte, kleuren en lettergroottes, wat een ontwerp netjes houdt.

Tailwind CSS biedt losse utility-klassen om een eigen ontwerp te bouwen, terwijl Bootstrap kant-en-klare componenten levert zoals navigatiebalken, kaarten en modals. Bootstrap is sneller voor een standaarduiterlijk met weinig ontwerpwerk. Tailwind CSS is beter als een project een eigen, uniek ontwerp nodig heeft zonder te vechten tegen een standaardthema.

Tailwind CSS installeer je via npm en koppel je aan de buildtool van het project, zoals Vite, PostCSS of de Tailwind CLI. In Tailwind CSS versie 4 voeg je het pakket toe en importeer je het bovenaan je hoofdbestand met CSS via @import "tailwindcss". De officiële installatiegids heeft korte stappen voor elk gangbaar framework, waaronder Laravel, Next.js en Vite.

Tailwind CSS is prima voor beginners die basiseigenschappen van CSS zoals margin, padding, flexbox en grid al begrijpen. Elke Tailwind-klasse hoort bij een echte CSS-eigenschap, dus wie eerst CSS leert, leest de klassen makkelijk. Beginners die de basis van CSS overslaan, hebben vaak moeite om lay-outs in Tailwind CSS te repareren.

De meeste ontwikkelaars die CSS kennen, werken binnen een paar dagen productief met Tailwind CSS. De klassenamen volgen duidelijke patronen, dus wie één groep klassen kent, kan de rest raden. Responsive varianten, eigen thema's en componentpatronen beheersen kost een paar weken echt gebruik.

Responsive design in Tailwind CSS werkt door breakpoint-prefixen zoals sm:, md: en lg: voor een utility-klasse te zetten. Tailwind CSS is mobile-first, dus een klasse zonder prefix geldt voor alle schermen en een klasse met prefix geldt vanaf dat breakpoint en hoger. Zo geeft text-sm md:text-lg kleine tekst op telefoons en grotere tekst op bredere schermen.

De standaard breakpoints in Tailwind CSS zijn sm bij 640 pixels, md bij 768 pixels, lg bij 1024 pixels, xl bij 1280 pixels en 2xl bij 1536 pixels. Elk breakpoint is een minimale breedte, wat past bij de mobile-first aanpak van Tailwind. Een project kan deze waarden wijzigen of nieuwe breakpoints toevoegen in de thema-instellingen.

Je voegt een donkere modus toe in Tailwind CSS door het prefix dark: voor een klasse te zetten, zoals dark:bg-gray-900. Standaard volgt Tailwind CSS de instelling van het besturingssysteem van de bezoeker. Om gebruikers met een knop van modus te laten wisselen, stel je de dark-variant zo in dat die afhangt van een klasse of data-attribuut op de pagina.

In Tailwind CSS versie 4 pas je kleuren en lettertypen aan met CSS-variabelen in een @theme-blok in je hoofdbestand met CSS. Een variabele zoals --color-brand maakt automatisch klassen zoals bg-brand en text-brand aan. Oudere versies gebruikten hiervoor een bestand tailwind.config.js, en die aanpak werkt in versie 4 nog via een compatibiliteitsoptie.

Tailwind CSS kan HTML druk laten ogen, omdat één element veel klassen kan dragen. De meeste teams lossen dit op door herhaalde patronen om te zetten in componenten in hun framework, zoals een Blade-, React- of Vue-component. Daar staat tegenover dat stijlen zichtbaar naast de opmaak staan, wat wijzigingen snel en veilig maakt.

Tailwind CSS houdt het CSS-bestand klein door de bestanden van het project te scannen en alleen de klassen te genereren die echt worden gebruikt. Ongebruikte utilities komen nooit in het uiteindelijke stylesheet. Een typisch CSS-bestand voor productie dat met Tailwind CSS is gebouwd, is klein, zelfs voor grote sites.

Met de @apply-directive in Tailwind CSS gebruik je Tailwind-utilityklassen binnen je eigen CSS-regels. Het is handig om inhoud op te maken waar je geen controle over hebt, zoals HTML uit een teksteditor. Het Tailwind-team raadt aan het spaarzaam te gebruiken, omdat componenten meestal een nettere manier zijn om stijlen te hergebruiken.

Ja, Tailwind CSS werkt goed met Laravel, en nieuwe Laravel-projecten zijn al ingericht om het met Vite te gebruiken. Je schrijft Tailwind-klassen in Blade-templates en Vite bouwt de uiteindelijke CSS. De starterkits van Laravel gebruiken Tailwind CSS ook voor hun inlog- en dashboardschermen.

Ja, Tailwind CSS werkt met React, Vue, Svelte en de meeste andere JavaScript-frameworks. De klassen komen in de opmaak van het component via className in React of class in Vue. Omdat elk component zijn eigen klassen bevat, past Tailwind CSS goed bij frameworks die met componenten werken.

Tailwind CSS heeft geen direct effect op de positie in zoekmachines, maar kan SEO indirect helpen door het CSS-bestand klein en pagina's snel te houden. Laadsnelheid hoort bij de signalen voor pagina-ervaring van Google. De inhoud, paginastructuur en semantische HTML tellen nog steeds veel zwaarder dan de tool waarmee je opmaakt.

Met arbitrary values in Tailwind CSS gebruik je een exacte waarde die niet in het thema staat door haar tussen vierkante haken te schrijven. Zo maakt w-[37%] of top-[117px] ter plekke een klasse voor precies die waarde. Arbitrary values zijn handig voor eenmalige gevallen, maar een waarde die je vaak gebruikt, hoort in het thema.

Hover- en focustoestanden in Tailwind CSS werken door een toestandsprefix zoals hover:, focus: of active: voor een utility-klasse te zetten. Zo maakt bg-blue-500 hover:bg-blue-600 een knop donkerder als de muis erboven hangt. Prefixen zijn te combineren met breakpoints en donkere modus, zoals md:hover:underline.

Nee, Tailwind CSS zelf bevat alleen utility-klassen, geen kant-en-klare componenten zoals modals of navigatiebalken. Kant-en-klare componenten komen uit aparte collecties, zoals het officiële Tailwind Plus of community-libraries zoals daisyUI en Flowbite. Veel teams bouwen hun eigen kleine set componenten bovenop de utilities.

Ja, Tailwind CSS ondersteunt lay-outs van rechts naar links via de varianten rtl: en ltr: en logische utility-klassen. Logische klassen zoals ms-4 en pe-2 zetten marge en padding aan het begin of eind van een regel, dus ze draaien in het Arabisch automatisch om. Zo werkt één set opmaak voor zowel Engelse als Arabische pagina's.

Tailwind CSS versie 4 verplaatste de configuratie naar CSS met het @theme-blok en één @import-regel. Versie 4 bracht ook een snellere build-engine, automatische herkenning van contentbestanden en moderne CSS-functies zoals cascade layers. De meeste projecten die van versie 3 upgraden, kunnen de officiële upgradetool gebruiken om hun code bij te werken.

Tailwind CSS is minder geschikt als een project een volledige set kant-en-klare componenten nodig heeft met bijna geen eigen ontwerp, of als het team liever klassieke CSS schrijft. Een kleine statische pagina met een paar stijlen heeft misschien helemaal geen framework nodig. Tailwind CSS betaalt zich het meest uit bij projecten met een eigen ontwerp dat blijft groeien.

Je houdt Tailwind CSS-klassen overzichtelijk door herhaalde patronen om te zetten in componenten en klassen in een vaste volgorde te zetten. De officiële Prettier-plugin voor Tailwind CSS sorteert klassen automatisch bij het opslaan. Merkkleuren en witruimte in het thema vastleggen houdt klassen ook kort en consistent.

Ja, Tailwind CSS is open source onder de MIT-licentie, dus je mag het gebruiken in persoonlijke en commerciële projecten. De licentie staat toe dat je Tailwind CSS gebruikt, aanpast en meelevert in elk product. De broncode staat openbaar op GitHub, waar iedereen haar kan lezen en problemen kan melden.