Tailwind CSS är det nya svarta

Sökmotoroptimering, kodstruktur, sidhastighet – det finns många faktorer som måste fungera för en modern webb. Men design och gränssnitt (frontend) har länge varit en utmaning. Här kommer Tailwind in i bilden. Vi reder ut vad det är, och varför vi gillar det.

Vad är Tailwind CSS?

Det är inte bara ännu ett CSS-ramverk, utan ett nytt sätt att ta sig an webbutveckling. Det är ett kraftfullt verktyg som gör att vi kan arbeta snabbare, mer enhetligt och mer skalbart än någonsin. 

När kom Tailwind?

Tailwind CSS lanserades i maj 2019 av Adam Wathan, Jonathan Reinink, David Hemphill och Steve Schoger. Det är alltså ett relativt ungt ramverk, och har därmed kunnat dra nytta av moderna CSS-standarder och verktyg från start. Den snabba och kontinuerliga utvecklingen har lett till flera stora versioner vilket visar på ramverkets starka fokus på prestanda (som vi alla vet är OERHÖRT viktigt idag).

Tailwind har vuxit explosionsartat och är idag ett av de mest populära ramverken hos utvecklare. Och varför det undrar nu vår nyfikne läsare?

Hur fungerar Tailwind?

För att förstå Tailwind måste man förstå konceptet "Utility-First" (där man bygger komponenter från grunden). Traditionellt sett skriver man CSS i stora block, till exempel:

När man sedan vill ha en annan knapp, måste man skriva en ny CSS-klass (.secondary-button) som tar hänsyn till den befintliga koden. Detta skapar snabbt stora, komplicerade stilar som är svåra att underhålla.

Tailwind vänder på det traditionella upplägget. Istället för att namnge en klass efter dess funktion (t.ex. primary-button), definierar du vad varje klass faktiskt gör visuellt – direkt i HTML.

Denna metod innebär att du som utvecklare har alla "penseldrag" tillgängliga direkt i HTML-filen vilket ger en oslagbar effektivitet.

Trots att Tailwind bygger på Utility-First, finns det en enorm mängd färdiga moduler, komponenter och mallar. Detta gör att du får det bästa av två världar: en snabb start men fullständig designfrihet.

Det finns många stora, kostnadsfria bibliotek, som erbjuder hundratals komponenter (knappar, varningar, kort etc.) för att snabbt kunna bygga prototyper och kompletta sajter. Det finns också en uppsjö av färdiga landningssidor och app-dashboards , ofta byggda med React eller Next.js.

Fyra fördelar med Tailwind

1. Utvecklingshastigheten

Som utvecklare behöver du sällan lämna HTML-filen för att skriva ny CSS-kod, vilket gör att prototypframtagning och utveckling av nya gränssnitt går betydligt snabbare. Små justeringar, som att ändra marginal eller färg på ett element, kan göras på sekunder.

2. Eliminering av "CSS-bloat"

Med traditionell CSS blir koden ofta tyngre och tyngre över tid, fylld med gammal, oanvänd kod som ingen vågar ta bort. Tailwind optimerar detta genom att bara inkludera den CSS som faktiskt används i projektet. Slutresultatet blir ofta minimala och blixtsnabba CSS-filer.

Och det ger ju bättre prestanda, snabbare sidladdningstider och högre poäng i Googles hastighetstester, vilket är en direkt SEO-fördel. Win-win-win alltså.

3. Inbyggd designkonsistens

Tailwind tvingar fram enhetlighet. Alla använder samma palett av färger (t.ex. blue-500 istället för en godtycklig hex-kod), samma avståndsskala (t.ex. p-4 istället för 16px) och samma typsnittsstorlekar. Denna "säkerhetsspärr" minskar risken för att olika delar av en webbsajt kan se olika ut. 

Detta tankesätt framhäver också komponentbaserad utveckling. Exempelvis en knapp kommer troligen användas på ett flertal ställen i UI:t och kan innehålla en lång rad med utility-klasser, allt från färg till hover-effekter och det blir  snabbt ohållbart att behöva underhålla och upprepa koden varje gång man behöver en ny knapp. Istället uppmuntrar Tailwind att skapa en återanvändbar button-komponent, vilket garanterar att varje knapp på hela sajten är en exakt kopia av den andra och inte bara snarlik.

4. Skalbarhet och enklare underhåll

När ett projekt växer blir underhåll den största kostnaden. Med Tailwind är koden lokalt bunden till varje komponent. När du som utvecklare ändrar en komponent, vet du att inte av misstag förstör stylingen på en annan del av webbsajten. Det gör det säkert att bygga ut och underhålla en sajt under lång tid. 

Det underlättar också rejält för utvecklarna att hoppa mellan projekt, då de inte behöver lära sig och sätta sig in i alla CSS-klasser i varje enskilt projekt, utan de kan snabbt och smidigt förstå vad varje Tailwind-klass representerar från start.

5. Tillgång till enormt ekosystem
Tailwind har i praktiken blivit en de facto-standard för moderna UI-bibliotek, vilket har skapat ett enormt ekosystem runt detta CSS-bibliotek. Exempel på populära sådana är shadcn, HeadlessUI och Flowbite. Det innebär att vi inte alltid behöver uppfinna hjulet på nytt, utan vi kan enkelt utöka vår egen verktygslåda genom att hämta tredjeparts-komponenter som vi själva kan förstå, använda och modifiera på ett enkelt och smidigt sätt.