Intro

Da jeg begyndte at kode syntes jeg CSS var meget forvirrende. Jeg skulle slå manuelt op hver gang jeg skulle finde ud af hvordan jeg lavede en simpel navbar eller centrerede nogle div tags, men så fandt jeg Tailwind. Tailwind var næsten mere forvirrende en ren CSS i starten, men så blev det hurtigt bedre. Efter at blot bruge en time på at lave en hjemmeside, for at lære Tailwind, var jeg allerede næsten lige så god til Tailwind som var jeg til helt plain CSS, trods at jeg har kodet i ren vanilla CSS i omkring et år. Så nu kommer alle grundene til at du burde skifte til Tailwind, hvis det ikke allerede er blevet gjort.

1. Nemt at lære (ja, faktisk!)

Du tænker måske lige nu ligesom da jeg først så Tailwind at det er skræmmende og sikkert er svært at lære, især med utility classer som p-4, flex, items-center, backdrop-blur-xl osv. Men i virkeligheden er det nemmere end helt vanilla CSS, da du fx ikke skal huske på hvordan man bruger backdrop-filter og -webkit-backdrop-filter når du ville lave en simpel backdrop blur. Det er derfor meget godt for begyndere, fordi at du skal lære nogle basic classes såsom bg, text, flex, osv. Når du så har lært dem skal du bare huske hvis du ville skrive en farve skriver du farvenavn-lyshed. Fx kunne en baggrund være bg-gray-500. Og hvis det er basically alt andet end farve skal du bare huske at skrive -størrelse efter. Et eksempel kunne være text-5xl. Du behøver ikke at tænke på pixels, rem, viewport osv. Bare du kan engelsk er du lige pludselig blevet en programmør.

2. Øger produktivitet markant

Tailwind har gjort mig langt hurtigere. Hvor jeg før skulle tænke i klasser, overrides og globale styles, kan jeg nu bare kode løs uden afbrydelser. Jeg behøver ikke hoppe frem og tilbage mellem HTML og CSS – det hele sker et sted, i min HTML kode. Jeg kan bygge et layout fra bunden hurtigere, uden at gå på kompromis med hverken struktur eller design.

3. Responsivt design indbygget

Jeg plejer at hade media queries, men efter at jeg er begyndt at bruge Tailwind har jeg haft ingen problem med dem. Nu skriver jeg bare:

1<p class="text-base md:text-lg lg:text-xl">
2  Responsivt tekst!
3</p>
Copy

4. Integration med html

Tailwind er ovenikøbet lavet til at du både nemt kan skrive i et stylesheet alene men også bare nemt og hurtigt skrive inde i HTMLet som du så ovenover i eksemplet. Men det har også en perfekt integration med nogle af de mest populære frameworks såsom React, Vue, Svelte og Next.js. Næsten alle UI libraries (som gør mig endnu mere produktiv!) bruger også Tailwind.

Konklusion

Tailwind CSS har for mig været et af de bedste værktøjer jeg har lært at bruge i min vej til at blive god til frontend. Det har simpelt syntaks og er stadig hurtigt. Det hjælper mig med at bygge flotte, responsive og vedligeholdbare designs uden at spilde tid. Eller for den sags skyld kigge en flere siders lang stylesheet igennem. Så hvis du er udvikler, så skift nu, før det er forsent.