Det finnes rammeverk og biblioteker som på en eller annen måte er kontroversielle, og som skaper sterke følelser hos utviklere. Tailwind er et sånt. Men, noen ganger må man kanskje innrømme at man har tatt feil?
Jeg har vært skeptisk til Tailwind CSS. Inntrykket mitt har vært at det bryter prinsippet om å skille innhold og presentasjon, og fører til en slags light-variant av inline styles. Jeg har tenkt at det vil være håpløst å skulle redesigne et nettsted som er laget med styling på denne måten. I stedet har jeg sverget til scss-filer og BEM-klassenavn.
Problemet med BEM-klassenavn er at det er kjempevanskelig å bruke konsekvent. Det er også kjempevanskelig å lage gode, forståelige klassenavn, som både jeg og mine kolleger kan finne tilbake til senere. Jeg har mer enn en gang laget et klassenavn jeg allerede vet er dårlig, men noe må klassen hete, og jeg finner ikke noe bedre. Så for å komme videre blir det sånn. Og dette klassenavnet har jo en tendens til å bli værende.
Et annet problem er at når man jobber med et prosjekt i team, og over lang tid, så kan man miste oversikten over hvilke klasser som finnes. Kanskje finner man en klasse som fungerer nesten, men ikke helt, til det nye som skal implementeres. Så lager man nye, og scss-filen blir større og større, og stadig mer uoversiktlig.
Derfor gikk jeg etterhvert med på å prøve Tailwind, selv om jeg har holdt det ganske bestemt unna «mine» prosjekter tidligere. Og det viser seg at det er utrolig behagelig å jobbe med. Det er en klasse for alle behov, og det går raskt og enkelt å sette opp nye komponenter i koden. Jeg er spesielt fornøyd med å kunne sette opp flexbox-containere uten å måtte finne på enda ett container-klassenavn.
Noen hensyn bør man ta:
Det blir fort mange klassenavn, og en stor HTML-struktur kan bli vanskelig å lese. Med BEM-klassenavn kan man bruke klassenavnet til å orientere seg, så vet man at man ser på riktig del av koden. Tailwind-klassene gir ingen slike holdepunkter. Løsningen er å være nøye på bruk av komponenter for alle gjenbrukbare deler av koden. Det gjør at man slipper gjentakelser, det er enklere å gjøre endringer senere, og man kan bruke komponentnavnet til å orientere seg i HTMLen. Win-win-win!
Så da er jeg solgt, da. Nå takker jeg gladelig ja når oppsett-scriptet til Next.js spør om jeg vil ha Tailwind CSS i det nye prosjektet