Twee jaar geleden besloot ik Tailwind CSS te gebruiken voor HTML-opmaak. Sindsdien gebruik ik het continu. In deze blogpost licht ik mijn ervaringen na twee jaar gebruik toe.
Wat is Tailwind CSS
Tailwind CSS is een framework dat voornamelijk een preset van CSS-classes biedt. Hierdoor hoef je zelf geen CSS te schrijven en kun je de gegeven classes direct in je HTML gebruiken. Dit maakt het mogelijk om relatief snel websites op te maken.
In principe kun je alles bereiken wat je met normale CSS kunt, zoals responsive design, donkere thema's en hover-effecten.
Hoe ik voorheen HTML opmaakte
Voordat ik Tailwind CSS gebruikte, maakte ik mijn HTML-elementen op een paar verschillende manieren op. Elke methode hing af van het type project waaraan ik werkte.
Losse CSS-stylesheets
Dit is naar mijn mening de meest simpele, nette, manier om je HTML op te maken. Vooral in vroegere projecten van mij was dit dé methode.
Bij deze methode heb je een los CSS-bestand, zoals stylesheet.css met daarin je stijl:
CSS
CSS1.title {
2 font-weight: bold;
3 font-size: 20px;
4}Deze stylesheet voeg je toe aan de HTML:
HTML
HTML1<link rel="stylesheet" href="stylesheet.css">Less en Sass
In latere, grotere projecten, heb ik veel gebruikgemaakt van Less of Sass. Deze twee geavanceerdere frameworks bieden extra functies aan zodat je efficiëntere CSS-code kunt schrijven.
Daarnaast gebruikte ik dit samen met externe minify-plugins, om de code te verkleinen.
Style-tag
Dit is een methode die ik vrij weinig heb toegepast. Bij deze methode schrijf je je CSS-code in je HTML binnen style
-tags, bijvoorbeeld:
HTML
1<html>
2 <head>
3 <style>
4 .title {
5 font-weight: bold;
6 font-size: 20px;
7 }
8 </style>
9 </head>
10 <body>
11 <h1 class="title">
12 Hello world!
13 </h1>
14 </body>
15</html>Inline style-tag
Ook een methode die ik in mindere mate heb toegepast. Hierbij maak je gebruik van de inline style-tag van je HTML-elementen. Bijvoorbeeld:
HTML
1<h1 style="font-weight:bold;font-size:20px;">
2 Hello world!
3</h1>Tailwind CSS in een notendop
Zoals eerder gezegd, is Tailwind CSS "een framework dat voornamelijk een preset van CSS-classes biedt.". Afhankelijk van het type project, voeg je Tailwind CSS toe ( zie Installation docs). In mijn geval installeer ik het als NPM dependency en stel ik de configuratie in.
Vervolgens kan ik in mijn code, bijvoorbeeld in mijn React-componenten, de Tailwind CSS-classes gebruiken. Het
vorige .title-voorbeeld wordt dan:
JSX
JSX1const MyComponent = () => {
2 return (
3 <h1 className="text-xl font-bold">
4 Hello world!
5 </h1>
6 );
7};In dit voorbeeld zijn text-xl en font-bold voorgedefinieerde classes van Tailwind CSS.
In het volgende voorbeeld zie je hoe je allerlei verschillende opmaak en layout classes kunt gebruiken:
HTML
1<div class="rounded-xl shadow-sm bg-white p-6 border w-full max-w-[400px] flex flex-col gap-6">
2 <p class="text-gray-600">
3 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
4 </p>
5
6 <label class="flex flex-col gap-2">
7 <span class="font-bold">
8 Lorem ipsum
9 </span>
10
11 <input
12 type="text"
13 placeholder="Placeholder"
14 class="w-full border outline-0 hover:border-purple-400 focus:border-orange-800 rounded-sm p-2 placeholder-slate-400 text-green-700"
15 />
16 </label>
17
18 <button class="px-6 py-1.5 rounded-sm transition-colors bg-blue-700 hover:bg-blue-800 text-white text-lg font-bold self-end">
19 Ok!
20 </button>
21</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ik ga geen voorbeelden geven van alle stijl-opties, check daarvoor de Tailwind CSS-documentatie.
Hero Icons
Hoewel het technisch gezien niet onder Tailwind CSS valt, moet ik Hero Icons toch benoemen. Dit is een icon-library van dezelfde makers, daarnaast wordt er ook naar verwezen vanuit de Tailwind CSS documentatie.
Hero Icons is een bibliotheek met icoontjes die je in allerlei stijlen kunt toevoegen. Sinds mijn overstap naar Tailwind CSS, gebruik ik deze library.
Hier zie je een voorbeeld van een icoon en hoe je ze kunt stijlen:
JSX
1import {UserIcon} from "@heroicons/react/24/outline";
2
3<UserIcon
4 className={"w-6 h-6"}
5/>
6
7<UserIcon
8 className={"w-8 h-8 text-red-500"}
9/>
10
11<UserIcon
12 className={"w-14 h-14 text-white bg-blue-800 rounded-full p-2 stroke-[3px]"}
13/>Headless UI
Net zoals Hero Icons, is Headless UI niet een onderdeel van Tailwind CSS, maar wel van dezelfde makers. Headless UI is " A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.".
Tot nu toe gebruik ik deze library voor het bouwen van dropdown-menu's, tab control's, enz. Deze library stelt je namelijk in staat om dit soort type controls makkelijk te stijlen (met transitie-effecten) en functionaliteit te geven.
Zo is bijvoorbeeld de flyout menu op mijn website gemaakt met behulp van Headless UI:
Tailwind Plus
Combineer Tailwind CSS, Hero Icons & Headless UI en je krijgt Tailwind Plus (voorheen Tailwind UI). Tailwind Plus is een library aan componenten en templates die je kunt gebruiken in je projecten. Tevens is het van wederom dezelfde makers als Tailwind CSS.
Deze library is weliswaar niet gratis, maar voor mij heb ik de kosten na twee jaar er zeker uit gehaald. Ik gebruik in veel projecten van mij deze componenten, of als inspiratie voor ontwerpen.
In mijn blogpost over Peggirkit, een componenten-library die ik zelf heb gebouwd, heb ik het hier meer over.
Pluspunten Tailwind CSS
Met Tailwind CSS kun je alles wat je met "normale" CSS ook kunt. Na het nu jaren te hebben gebruikt, wil ik nog een paar pluspunten belichten. De volgende punten zijn voor mij redenen om deze framework te blijven gebruiken.
Snelle development tijd
Zodra je eenmaal door hebt hoe Tailwind CSS werkt en je kent de class-namen uit je hoofd, dan kun je razendsnel je HTML-componenten opmaken. Het scheelt veel tijd dat je zelf geen class definities hoeft je schrijven. Tevens, als je React-componenten opmaakt, zoals ik, dan hoef je je dus niet bezig te houden met CSS-selectors.
Thema's (dark mode)
Elke Tailwind CSS-class die je gebruikt kun je prefixen met dark:. In dat geval wordt de desbetreffende class gebruikt
voor wanneer donkere modus is ingeschakeld. In het volgende voorbeeld is de tekstkleur wit (text-white) wanneer
donkere modus is ingeschakeld en anders zwart (text-black):
HTML
1<p className="text-xl font-bold text-black dark:text-white">
2 Hello world!
3</h1><div>
Hello world!
</div>
<div class="dark">
Hello world!
</div>
De donkere modus kan worden ingeschakeld op basis van systeeminstellingen of door een specifieke class toe te voegen. In
dat laatste geval kun je bijvoorbeeld .dark CSS-class toevoegen aan de HTML-tag. Dit kun je overigens zelf
configureren.
Eenduidige configuratie
Met de Tailwind CSS-configuratiebestand kun je allerlei variabelen instellen of aanpassen. Denk aan specifieke kleurcodes die je in je hele applicatie gebruikt of aan breakpoints.
Als ik in mijn projecten specifieke themakleuren en tinten ervan moet gebruiken, dan hoef ik die maar eenmalig in te stellen.
Voor Nyef.nl heb ik bijvoorbeeld in mijn configuratie de kleur ny-tg:
1const defaultTheme = require("tailwindcss/defaultTheme");
2
3/** @type {import("tailwindcss").Config} */
4module.exports = {
5 // ...
6 theme: {
7 extend: {
8 // ...
9 colors: {
10 // ...
11 "ny-tg": {
12 600: "#EFC30C",
13 },
14 }
15 },
16 },
17};Deze kan ik vervolgens in mijn code gebruiken:
HTML
1<div class="w-[200px] h-[100px] bg-ny-tg-600">
2</div>Responsive design
Voorheen, wanneer ik aan responsive websites werkte, bouwde ik het desktop-first. Met Tailwind CSS doe ik dat
mobile-first. Elke Tailwind CSS-class kun je prefixen met een breakpoint (sm, md, lg, xl, 2xl). Classes die
geprefixed zijn met sm worden pas actief vanaf een breedte van 640px.
In het volgende voorbeeld is de tekstgrootte text-lg maar vanaf een schermbreedte van 640px, wordt de tekst groter
omdat text-xl dan actief wordt:
HTML
1<h1 className="text-lg sm:text-xl font-bold text-black dark:text-white">
2 Hello world!
3</h1>Je kunt via de configuratie ook een desktop-first aanpak instellen, evenals aangepaste breakpoints.
Layout
Dankzij de flexbox- en grid-classes, kun je snel en goed layouts maken. Met name grids kun je efficiënt implementeren. Bijvoorbeeld:
HTML
1<div class="grid grid-cols-6">
2 <div class="col-span-2">
3 1
4 </div>
5 <div class="col-span-1">
6 2
7 </div>
8 <div class="col-span-3">
9 3
10 </div>
11</div>Documentatie
De documentatie, vooral als je nieuw bent met Tailwind CSS, is je grote vriend. Alle features zijn vrij goed toegelicht. Als je snel een class wilt opzoeken en voorbeelden wilt zien, dan kan dat.
Intuïtieve namen
Als je eenmaal gewend bent aan Tailwind CSS, zul je doorkrijgen hoe dat class-namen werken. Wanneer dat gebeurt, kun je nóg sneller werken. Bij Tailwind CSS gebruiken ze consistente naming conventions.
Bijvoorbeeld: groottes van elementen worden aangeduid met sm, base, lg, enzovoort. Dus voor font-sizes heb
je text-sm, text-lg, bij border-radius heb je rounded-sm, rounded-lg, enz. En zo heb je meer eigenschappen die
kwa structuur hetzelfde zijn.
Actieve ontwikkeling & community
Omdat Tailwind CSS veel wordt gebruikt (meer dan 11 miljoen wekelijkse downloads op NPM bij het schrijven van deze blog), is er ook veel support. Daarnaast worden er continu nieuwe versies uitgebracht met verbeterde features.
Nadelen Tailwind CSS
Er is voornamelijk één nadeel aan het gebruik van Tailwind CSS — en dat is dat de code onoverzichtelijk kan worden als je veel classes gebruikt. Hoewel dit na verloop van tijd went, blijft het voor mij niet ideaal.
Conclusie
Na ruim twee jaar Tailwind CSS gebruikt te hebben is mijn conclusie dat ik op dit moment niet anders wil. Na verloop van tijd ben ik enorm gewend geraakt aan deze manier van werken, waardoor ik relatief snel ontwerpen kan implementeren met Tailwind CSS.
