IT Ordbog
Hvad er Tailwind CSS?
Tailwind CSS er et utility-first CSS-framework, der revolutionerer måden hjemmesider styles på. I stedet for at skrive custom CSS, bruger du foruddefinerede utility-klasser direkte i din HTML for hurtigere og mere konsistent udvikling.
Hvad er Tailwind CSS?
Tailwind CSS er et utility-first CSS-framework, der giver et stort sæt af foruddefinerede klasser til styling direkte i HTML-markupen. I stedet for at skrive custom CSS som "margin-top: 1rem; color: blue;", skriver du klasser som "mt-4 text-blue-500". Tailwind blev skabt af Adam Wathan i 2017 og er vokset til det mest populære CSS-framework med over 80.000 GitHub-stars. Det bruges af virksomheder som Shopify, Netflix og NASA.
Sådan fungerer Tailwind
Tailwind scanner din kode for brugte klasser og genererer kun den CSS, der faktisk bruges — dette giver ekstremt små CSS-bundler (typisk under 10KB gzipped). Frameworket tilbyder et konsistent design-system med foruddefinerede skalaer for spacing, farver, typografi og breakpoints. Tailwind konfigureres via tailwind.config.js, hvor du kan tilpasse farver, fonts og breakpoints til dit brand. Med Tailwinds JIT (Just-in-Time) compiler genereres CSS on-demand under udvikling.
Tailwind vs. traditionel CSS
Med traditionel CSS skriver du klasser som ".header-button { background: blue; padding: 8px 16px; }" i separate filer. Med Tailwind skriver du "bg-blue-500 px-4 py-2" direkte på elementet. Fordele: ingen navngivningskonflikter, intet skifte mellem filer, og lettere at forstå styling ved at se markupen. Kritikere mener, at Tailwind gør HTML rodet, men i praksis giver komponentbaserede frameworks som React ren kode, da styles grupperes naturligt med komponenterne.
Hvorfor bruger vi Tailwind CSS?
Hos Grumsen Development bruger vi Tailwind CSS til alle projekter fordi det giver: 1) Hurtigere udvikling — styles skrives inline uden kontekstskift, 2) Konsistent design — foruddefinerede skalaer sikrer ensartet spacing og typografi, 3) Minimal CSS — kun brugte styles inkluderes i produktion, 4) Responsivt design — mobile-first breakpoints med prefixes som md: og lg:, 5) Dark mode — built-in support med dark: prefix. Tailwind passer perfekt med React og Next.js.
