Wat is Tailwind CSS? Een heldere gids voor app-bouwers

Tailwind CSS is een toolkit voor het stylen van websites. In plaats van aparte stijlregels in een eigen bestand te schrijven, geef je elk element korte, kant-en-klare classnamen: bg-white voor een witte achtergrond, p-4 voor padding, text-lg voor grotere tekst, rounded-xl voor afgeronde hoeken. Tailwind maakt daar de CSS van die de browser nodig heeft. Het is gratis, open source en een van de meest gebruikte manieren om moderne webapps te stylen.

Waarom Tailwind ertoe doet als je met AI bouwt

Als je een webapp bouwt met een AI-app-builder, is de kans groot dat je app met Tailwind is gestyled. Mythex start nieuwe projecten bijvoorbeeld op Vite + React + TypeScript + Tailwind, tenzij je iets anders vraagt (hoe de techniek wordt gekozen).

Dat is op drie manieren belangrijk voor jou:

• Ontwerpwijzigingen zijn goedkoop. Omdat de styling direct naast elke knop, kaart en kop staat, kan de AI "maak de kaarten minder druk" doen door een paar classnamen op één plek aan te passen.
• Je kunt het lezen. Tailwind-classes lijken sterk op gewoon Engels. text-center font-bold text-2xl is niet moeilijk te ontcijferen, ook als je nog nooit code hebt geschreven.
• De look blijft consistent. Tailwind heeft een vaste schaal van maten, afstanden en kleuren. Zo eindigt een app niet met veertien net iets verschillende grijstinten.

Een alledaagse vergelijking

Denk aan verf en het bouwen van een huis.

Gewone CSS is alsof je voor elke muur je eigen verf mengt. Je hebt volledige vrijheid, maar na een tijdje is de woonkamer "warm wit", de gang "iets warmer wit" en weet niemand meer waarom.

Tailwind is als een kleurenkaart van de verfwinkel plus een set gelabelde stickers. Elke muur krijgt een sticker, zoals "wit, mat, 2 lagen", en de kaart biedt alleen een zorgvuldig gekozen set tinten aan. Je verliest een beetje vrijheid, maar iedereen op de klus weet precies hoe elke muur eruit moet zien door het label te lezen.

Hoe Tailwind werkt

Een webpagina bestaat uit HTML (de inhoud en structuur) en CSS (de look). Normaal staat CSS in een apart bestand, met regels zoals deze:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Met Tailwind sla je die regel over en zet je utility-classes direct op het element:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Je boeking is bevestigd
</div>

Elke class doet één kleine taak. Wanneer de app wordt gebouwd, scant Tailwind je bestanden, vindt de classes die je echt hebt gebruikt en genereert alleen de CSS voor die classes. Zo blijft het uiteindelijke stylesheet klein.

Tailwind versie 4, de huidige hoofdversie, is met heel weinig configuratie op te zetten: je installeert het, voegt de plug-in toe aan je build-tool en zet @import "tailwindcss"; bovenaan je CSS-bestand. Aanpassingen zoals merkkleuren en lettertypen worden in CSS gedefinieerd als design tokens, in plaats van in een groot JavaScript-configuratiebestand zoals oudere versies nodig hadden. Als je een oudere tutorial leest die tailwind.config.js noemt, is dat de reden.

Een uitgewerkt voorbeeld: een prijskaart

Stel dat je AI-builder een prijspagina heeft gemaakt en je wilt dat de "Pro"-kaart opvalt. De code voor die kaart kan er zo uitzien (in een React-component schrijf je class als className):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Proefperiode starten
  </button>
</div>

Lezen van links naar rechts:

Als je vraagt "laat de Pro-kaart opvallen met een blauwe rand en een subtiele schaduw", kan de AI border-gray-200 vervangen door border-2 border-blue-600 en shadow-lg toevoegen. Dat is de hele wijziging.

Responsive design en donkere modus

Tailwind heeft korte prefixen voor schermformaten en toestanden:

• md:grid-cols-3: drie kolommen op middelgrote schermen en groter; op een telefoon geldt de standaard van één kolom. Tailwind is mobile-first: classes zonder prefix gelden overal, en prefixen voegen wijzigingen toe voor grotere schermen.
• hover:bg-gray-700: een donkerdere knop wanneer de muis erboven staat.
• dark:bg-gray-900: een andere achtergrond wanneer donkere modus aan staat.

Daarom is om een mobiel responsieve lay-out of donkere modus te vragen meestal snel klaar in een Tailwind-project.

Belangrijke termen

Veelvoorkomende misverstanden

• "Tailwind is een ontwerp." Dat is het niet. Tailwind geeft je bouwstenen, geen look. Twee Tailwind-sites kunnen er totaal verschillend uitzien. De generieke "AI-app-look" komt van standaardinstellingen, niet van Tailwind zelf; geef je builder echte richting. Zie hoe je met AI een mooie app ontwerpt.
• "Het is hetzelfde als inline styles." Niet helemaal. Classes komen uit een gedeelde schaal, ondersteunen hover, donkere modus en breakpoints, en worden tijdens het bouwen omgezet in gewone CSS.
• "Tailwind maakt pagina's zwaar." De build neemt alleen de classes mee die je gebruikt, dus de CSS die naar bezoekers gaat, is meestal klein.
• "Lange lijsten met classes betekenen rommelige code." Ze zien er in het begin druk uit, maar alles over de look van een element staat op één plek. Herhaalde patronen worden normaal in componenten ondergebracht, zoals één Button.
• "Als ik Tailwind gebruik, kan ik geen eigen CSS gebruiken." Je kunt altijd gewone CSS schrijven wanneer je dat nodig hebt.

Wat je aan je AI-builder kunt vragen

• "Definieer onze merkkleuren en lettertypen één keer als theme-tokens, en gebruik ze overal in plaats van vastgelegde kleurcodes."
• "Zorg dat elke kaart, knop en invoerveld dezelfde hoekafronding en afstanden gebruikt."
• "Controleer de lay-out op telefoonbreedte en los alles op wat overloopt of te klein is om op te tikken."
• "Voeg donkere modus toe met de dark:-variant van Tailwind en zorg dat het tekstcontrast leesbaar blijft."
• "Haal herhaalde knopstijlen naar één herbruikbare Button-component."
• "Leg de Tailwind-classes van deze sectie uit in gewoon Nederlands."

Tailwind in Mythex

Nieuwe Mythex-projecten gebruiken standaard Tailwind, samen met React en TypeScript, zodat je visuele wijzigingen in gewone woorden kunt vragen en ze in de live Preview ziet. Wil je liever de code zien, dan toont de code-editor elke class (alleen-lezen op Free, bewerkbaar op Pro). Wil je liever gewone CSS of een andere opzet, zeg dat dan in je eerste prompt; de documentatie legt uit hoe de stack wordt gekozen.

Veelgestelde vragen