Hva er Tailwind CSS? En enkel guide for appbyggere

Tailwind CSS er et verktøysett for å style nettsider. I stedet for å skrive egne stilregler i en egen fil, gir du hvert element korte, ferdiglagde klassenavn – bg-white for en hvit bakgrunn, p-4 for indre avstand, text-lg for større tekst, rounded-xl for avrundede hjørner – og Tailwind lager CSS-en nettleseren trenger. Det er gratis, åpen kildekode, og en av de vanligste måtene moderne web-apper får stil på.

Hvorfor Tailwind er viktig når du bygger med AI

Hvis du bygger en web-app med en AI-appbygger, er det god sjanse for at appen din er stylet med Tailwind. Mythex starter for eksempel nye prosjekter på Vite + React + TypeScript + Tailwind med mindre du ber om noe annet (slik velges teknologien).

Det betyr noe for deg på tre måter:

• Designendringer er billige. Fordi stilen ligger rett ved hver knapp, kort og overskrift, kan AI-en endre «gjør kortene mindre fulle» ved å redigere noen klassenavn på ett sted.
• Du kan lese det. Tailwind-klasser ligner vanlig engelsk. text-center font-bold text-2xl er ikke vanskelig å tyde, selv om du aldri har skrevet kode.
• Utseendet holder seg konsekvent. Tailwind kommer med en fast skala for størrelser, avstander og farger. Det hindrer at en app ender opp med 14 litt forskjellige grånyanser.

En hverdagslig sammenligning

Tenk på maling og å bygge et hus.

Vanlig CSS er som å blande din egen maling til hver vegg. Du har full frihet, men etter en stund er stuen «varm hvit», gangen er «litt varmere hvit», og ingen husker hvorfor.

Tailwind er som en malerforretnings fargekart pluss et sett merkede klistremerker. Hver vegg får et klistremerke – «hvit, matt, to strøk» – og fargekartet tilbyr bare et kuratert utvalg nyanser. Du mister litt frihet, men alle på jobben vet nøyaktig hvordan hver vegg skal se ut bare ved å lese klistremerket.

Hvordan Tailwind fungerer

En nettside er bygget av HTML (innholdet og strukturen) og CSS (utseendet). Vanligvis ligger CSS i en egen fil med regler slik:

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

Med Tailwind hopper du over å skrive den regelen og setter verktøyklasser rett på elementet:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Bestillingen din er bekreftet
</div>

Hver klasse gjør én liten jobb. Når appen bygges, skanner Tailwind filene dine, finner klassene du faktisk har brukt, og lager bare CSS for dem. Det holder det endelige stilarket lite.

Tailwind versjon 4, den nåværende hovedversjonen, settes opp med svært lite konfigurasjon: du installerer det, legger til plugin-en i byggverktøyet ditt og skriver @import "tailwindcss"; øverst i CSS-filen. Tilpasninger som merkefarger og skrifter defineres i CSS som designtokens, ikke i en stor JavaScript-konfigurasjonsfil slik eldre versjoner krevde. Hvis du leser en eldre veiledning som nevner tailwind.config.js, er det grunnen.

Et praktisk eksempel: et priskort

Anta at du har bedt AI-byggeren om en prisside, og at du vil at «Pro»-kortet skal skille seg ut. Koden for kortet kan se slik ut (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>

Lest fra venstre til høyre:

Hvis du spør «få Pro-kortet til å skille seg ut med en blå kant og en subtil skygge», kan AI-en endre border-gray-200 til border-2 border-blue-600 og legge til shadow-lg. Det er hele endringen.

Responsivt design og mørk modus

Tailwind har korte prefikser for skjermstørrelser og tilstander:

• md:grid-cols-3 – tre kolonner på mellomstore skjermer og større; på en telefon gjelder standard enkeltkolonne. Tailwind er mobile-first: uten prefiks gjelder klassen overalt, og prefikser legger til endringer for større skjermer.
• hover:bg-gray-700 – en mørkere knapp når musen er over den.
• dark:bg-gray-900 – en annen bakgrunn når mørk modus er på.

Derfor er det vanligvis raskt å be om et mobilresponsivt oppsett eller mørk modus i et Tailwind-prosjekt.

Nøkkelbegreper

Vanlige misforståelser

• «Tailwind er en design.» Det er det ikke. Tailwind gir deg byggeklosser, ikke et utseende. To Tailwind-sider kan se helt forskjellige ut. Den generiske «AI-appen»-looken kommer fra standardverdier, ikke fra Tailwind selv – gi byggeren ekte retning. Se slik designer du en pen app med AI.
• «Det er det samme som innlinjestiler.» Ikke helt. Klassene kommer fra en felles skala, støtter hover, mørk modus og breakpoints, og gjøres om til vanlig CSS når appen bygges.
• «Tailwind gjør sider tunge.» Byggingen tar bare med klassene du bruker, så CSS-en som sendes til besøkende er vanligvis liten.
• «Lange klasselister betyr rotete kode.» De ser travle ut først, men alt om et elements utseende er samlet på ett sted. Gjentatte mønstre trekkes vanligvis ut i komponenter, for eksempel én Button.
• «Hvis jeg bruker Tailwind, kan jeg ikke bruke egen CSS.» Du kan fortsatt skrive vanlig CSS når du trenger det.

Hva du bør be AI-byggeren om

• «Definer merkefargene og skriftene våre én gang som temategenskaper, og bruk dem overalt i stedet for hardkodede farger.»
• «Gi alle kort, knapper og felt samme hjørneradius og avstander.»
• «Sjekk oppsettet i telefonbredde og rett alt som flyter over eller er for lite å trykke på.»
• «Legg til mørk modus med Tailwinds dark:-variant og sørg for at tekstkontrasten er lesbar.»
• «Trekk gjentatte knappestiler ut i én gjenbrukbar Button-komponent.»
• «Forklar Tailwind-klassene i denne delen med vanlig norsk.»

Tailwind i Mythex

Nye Mythex-prosjekter bruker Tailwind som standard sammen med React og TypeScript, så du kan be om visuelle endringer med vanlige ord og se dem i den live forhåndsvisningen. Hvis du heller vil se koden, viser kodeeditoren alle klassene (skrivebeskyttet på Free, redigerbar på Pro). Hvis du foretrekker vanlig CSS eller et annet oppsett, si det i første prompt – dokumentasjonen forklarer hvordan stacken velges.

Spørsmål