Cursus Tailwind CSS

Voor wie is de cursus Tailwind CSS?

De cursus Tailwind CSS is voor developers en webontwerpers die CSS kennen en sneller consistente interfaces willen bouwen. Je schrijft de stijl rechtstreeks in je HTML met kleine klassen, in plaats van telkens een apart stylesheet aan te vullen. Dat voelt eerst vreemd, maar na een paar oefeningen merk je hoeveel tijd het spaart.

Na de cursus Tailwind CSS zet je een project op en leg je een huisstijl vast als kleuren, lettertypes en afstanden. Daarna bouw je responsive componenten met states zoals hover en focus. Je leest ook vlot de code van projecten in Laravel, React of Next.js die Tailwind gebruiken. Wij bouwen er zelf mee, ook deze website.

Wat de cursus Tailwind CSS behandelt

Eerst bekijk je het idee achter utility-first: waarom kleine, vaste klassen leiden tot minder CSS en minder verrassingen. Daarna installeer je Tailwind in een project en zie je hoe het alleen de klassen bewaart die je echt gebruikt. Ook de koppeling met Vite komt kort aan bod.

Vervolgens leer je de taal van de klassen. Spacing, kleuren, typografie, randen en schaduwen volgen allemaal dezelfde logica, dus na een paar uur lees je ze vlot. Met flex en grid bouw je layouts, en met voorvoegsels zoals md: en lg: maak je ze responsive. Ook states als hover:, focus: en dark: komen aan bod.

In het derde deel van de cursus Tailwind CSS leg je een huisstijl vast. Met het @theme-blok definieer je eigen kleuren, lettertypes en breekpunten als variabelen. Zo werken ontwerper en developer met dezelfde namen, van ontwerp tot code. Dat sluit aan bij hoe wij een merk doortrekken naar het scherm.

Tot slot werk je aan herbruikbare componenten. Je ziet wanneer je een component in Blade of React maakt en wanneer een eigen klasse met @apply zinvol is. Ook toegankelijkheid krijgt aandacht, zoals zichtbare focus en voldoende contrast. Als naslag gebruiken we de documentatie van Tailwind CSS, die je na afloop blijft gebruiken.

Zo volg je deze opleiding

De lessen draaien rond één ontwerp dat je stap voor stap in code omzet, zoals een landingspagina met een menu, kaarten en een formulier. Je vergelijkt je resultaat telkens met het ontwerp, net zoals in een echt project. Zo leer je niet alleen klassen, maar ook kijken.

Tom Vanhoutte schreef het lesmateriaal vanuit zijn werk bij in2sites, waar Tailwind de vaste basis is voor websites en voor schermen in Laravel en Next.js. De cursus Tailwind CSS kan in groep bij een opleidingscentrum, in-company bij een bedrijf of op maat voor één developer. Alle vormen lees je bij onze IT-opleidingen. Zoek je eerder een goed ontwerp voor je applicatie, kijk dan naar ons werk rond UX-design.