Hvad er Tailwind CSS? En letforståelig guide til app-byggere

Tailwind CSS er et værktøjssæt til at style hjemmesider. I stedet for at skrive separate stilregler i en egen fil giver du hvert element korte, færdige klassenavne — bg-white for en hvid baggrund, p-4 for indvendig margen, text-lg for større tekst, rounded-xl for afrundede hjørner — og Tailwind producerer den CSS, browseren har brug for. Det er gratis, open source og en af de mest almindelige måder at style moderne webapps på.

Hvorfor Tailwind betyder noget, når du bygger med AI

Hvis du bygger en webapp med en AI-app-builder, er der god chance for, at din app er stylet med Tailwind. Mythex starter fx nye projekter på Vite + React + TypeScript + Tailwind, medmindre du beder om noget andet (sådan vælges teknologien).

Det betyder noget for dig på tre måder:

• Designændringer er billige. Fordi stylingen ligger lige ved hver knap, kort og overskrift, kan AI'en ændre »gør kortene mindre fyldte« ved at redigere nogle få klassenavne ét sted.
• Du kan læse det. Tailwind-klasser ligner almindelig engelsk. text-center font-bold text-2xl er ikke svært at tyde, selv hvis du aldrig har skrevet kode.
• Udseendet forbliver konsistent. Tailwind kommer med en fast skala af størrelser, afstande og farver. Det forhindrer, at en app ender med 14 lidt forskellige grå nuancer.

En hverdagsanalogi

Tænk på at male et hus.

Almindelig CSS er som at blande sin egen maling til hver væg. Du har fuld frihed, men efter noget tid er stuen »varm hvid«, gangen er »lidt varmere hvid«, og ingen husker hvorfor.

Tailwind er som et farvekort fra malerbutikken plus et sæt mærkede klistermærker. Hver væg får et klistermærke — »hvid, mat, 2 lag« — og farvekortet tilbyder kun et udvalgt sæt nuancer. Du mister lidt frihed, men alle på byggepladsen ved præcis, hvordan hver væg skal se ud, bare ved at læse klistermærket.

Sådan virker Tailwind

En webside er bygget af HTML (indhold og struktur) og CSS (udseendet). Normalt ligger CSS i en separat fil med regler som denne:

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

Med Tailwind springer du den regel over og sætter utility-klasser direkte på elementet:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Din booking er bekræftet
</div>

Hver klasse har et lille job. Når appen bygges, scanner Tailwind dine filer, finder de klasser, du faktisk har brugt, og genererer kun CSS til dem. Det holder den endelige stylesheet lille.

Tailwind version 4, den aktuelle hovedversion, sættes op med meget lidt konfiguration: du installerer det, tilføjer plugin'et til dit byggeværktøj og skriver @import "tailwindcss"; øverst i din CSS-fil. Tilpasninger som brandfarver og skrifttyper defineres i CSS som designtokens i stedet for i en stor JavaScript-konfigurationsfil, som ældre versioner krævede. Hvis du læser en ældre vejledning, der nævner tailwind.config.js, er det derfor.

Et praktisk eksempel: et priskort

Sig, at du har bedt din AI-builder om en prisside, og at du vil have »Pro«-kortet til at skille sig ud. Koden for kortet kan se sådan ud (i en React-komponent skrives class som 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">
    Start prøveperiode
  </button>
</div>

Læst fra venstre mod højre:

Hvis du spørger »gør Pro-kortet fremtrædende med en blå kant og en subtil skygge«, kan AI'en ændre border-gray-200 til border-2 border-blue-600 og tilføje shadow-lg. Det er hele ændringen.

Responsivt design og mørk tilstand

Tailwind har korte præfikser for skærmstørrelser og tilstande:

• md:grid-cols-3 — tre kolonner på mellemstore skærme og op; på en telefon gælder standarden med én kolonne. Tailwind er mobile-first: uden præfiks gælder klassen overalt, og præfikser tilføjer ændringer for større skærme.
• hover:bg-gray-700 — en mørkere knap, når musen er over den.
• dark:bg-gray-900 — en anden baggrund, når mørk tilstand er slået til.

Derfor er det ofte hurtigt at bede om et mobilvenligt layout eller mørk tilstand i et Tailwind-projekt.

Vigtige termer

Almindelige misforståelser

• »Tailwind er et design.« Det er det ikke. Tailwind giver dig byggeklodser, ikke et udseende. To Tailwind-sites kan se helt forskellige ud. Den generiske »AI-app-look« kommer fra standardindstillinger, ikke fra Tailwind selv — giv din builder reel retning. Se sådan designer du en flot app med AI.
• »Det er det samme som inline-styles.« Ikke helt. Klasser kommer fra en fælles skala, understøtter hover, mørk tilstand og breakpoints og bliver til almindelig CSS under byggeprocessen.
• »Tailwind gør sider tunge.« Byggeprocessen medtager kun de klasser, du bruger, så den CSS, besøgende henter, er typisk lille.
• »Lange klasselister betyder rodet kode.« De ser travle ud i starten, men alt om et elements udseende står ét sted. Gentagne mønstre trækkes normalt ud i komponenter, fx en enkelt Button.
• »Hvis jeg bruger Tailwind, kan jeg ikke bruge egen CSS.« Du kan stadig skrive almindelig CSS, når du har brug for det.

Hvad du beder din AI-builder om

• »Definer vores brandfarver og skrifttyper én gang som temategn, og brug dem overalt i stedet for hårdkodede farver.«
• »Gør, at alle kort, knapper og input bruger samme hjørneradius og afstand.«
• »Tjek layoutet i telefonbredde, og ret alt, der flyder over eller er for lille at trykke på.«
• »Tilføj mørk tilstand med Tailwinds dark:-variant, og sørg for, at tekstkontrasten forbliver læsbar.«
• »Træk gentagne knapstile ud i én genbrugelig Button-komponent.«
• »Forklar Tailwind-klasserne i denne sektion med almindelige ord.«

Tailwind i Mythex

Nye Mythex-projekter bruger Tailwind som standard sammen med React og TypeScript, så du kan bede om visuelle ændringer med almindelige ord og se dem i den live forhåndsvisning. Hvis du hellere vil se koden, viser kodeeditoren alle klasserne (skrivebeskyttet på Free, redigerbar på Pro). Hvis du foretrækker almindelig CSS eller en anden opsætning, så sig det i din første prompt — dokumentationen forklarer, hvordan stakken vælges.

Spørgsmål