CSS-rammeverk har en "look"
Vanligvis når man skal lage en nettside, pleier man tradisjonelt sett å benytte seg av CSS/SASS eller et frontend-rammeverk som Bootstrap eller Materialize.
Fordelen med å kode selv er kontroll, mens ulempene er lav hastighet, mange ekstra filer og mye lenking til klassenavn i HTML.
Rammeverk gir på den andre siden hurtighet til erfarne utviklere samt utvidet mulighetsrom for utviklere med kortere fartstid. Ulempen er at kunnskapen om det nye rammeverket også blir en ny og isolert ferdighet som er vanskelig å overføre tilbake til CSS.
Neste generasjon Tailwind CSS: - Store nyheter!
Flere av rammeverkene har ofte også sin egen «look»: Om du for eksempel har bygget et par sider med Bootstrap, vil du fort kjenne igjen dette når du lander på en ny side – man sier da at denne siden er «Bootstrap’et». Dette har utviklet seg til en look mange ønsker å unngå om det er et mål å skille seg litt ut visuelt.
Men Tailwind er utility-first
I 2017 ble TailwindCSS lansert, og med det en ny tilnærming til å strukturere og forholde seg til styling av nettsider.
I stedet for klassiske frontend-rammeverk, er Tailwind såkalt utility-first. Dette refererer til at det for det meste består av en haug av hjelpeklasser, eller utilities, som har blitt definert for alt du kan tenke deg.
Det være seg bredde, farge, skygge, margin eller animasjoner. De er utarbeidet for å være dekkende og samtidig innsnevrende.
Se traileren til Tailwind CSS 2.0
Det er også bygget inn støtte for å optimalisere koden ved å fjerne alle hjelpeklasser du ikke trenger i bygg-steget, og du holder dermed prosjektets størrelse i produksjon under kontroll ved å kun "shippe" det du trenger.
Du får et subset av styling-funksjonalitet som skal fungere for alle vanlige behov. For eksempel fargevalg fra 100 som er lys, til 900 som er mørk i steg på 100.
I tillegg kan alt overstyres og utvides i en konfigurasjonsfil, slik at du enkelt kan integrere den visuelle profilen til produktet ditt. Merk at hjelpeklassene er så minimalistiske som mulig og gir kun én og én funksjon. Det er altså en annen måte å tenke på enn for eksempel rammeverk som gir deg en fiks ferdig stylet knapp.
Under følger et eksempel jeg har lånt fra deres egen dokumentasjon. Den første kodesnutten viser en tradisjonell tankegang, mens den andre viser hvordan man kan oppnå det samme med Tailwind. Legg spesielt merke til at du med Tailwind unngår behovet for å navngi og koble alle de forskjellige nivåene i grensesnittet. Både i koden og mentalt naturligvis.
Dette er det jeg mener med lenking frem og tilbake.
<div class="chat-notification">
<div class="chat-notification-logo-wrapper">
<img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div class="chat-notification-content">
<h4 class="chat-notification-title">ChitChat</h4>
<p class="chat-notification-message">You have a new message!</p>
</div>
</div><style>
.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.chat-notification-logo-wrapper {
flex-shrink: 0;
}
.chat-notification-logo {
height: 3rem;
width: 3rem;
}
.chat-notification-content {
margin-left: 1.5rem;
padding-top: 0.25rem;
}
.chat-notification-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
}
.chat-notification-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;
}
</style>.
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-gray-500">You have a new message!</p>
</div>
</div>Ulempe at man må lære
Den eneste ulempen med Tailwind som jeg ser, er at det er enda en (liten) ting til å lære, og at det krever en liten smule oppsett.
I 2017 ble det popularisert et nytt (for meg) uttrykk: «Javascript fatigue». Og om du hopper fra trend til trend er det nok et innslag av dette i CSS-verdenen også.
Tailwind er i utgangspunktet svært enkelt å sette opp. Når det er sagt så har jeg ennå ikke klart det det på første forsøk kun ved å følge guiden.
Visste du at Safari og Chrome gjør farger mykere?
Det har alltid vært behov for noe småjustering for å få det til å fungere. Dette ser heldigvis ut til å bli bedre, og sist gang var betydelig lettere enn første.
Så, kanskje neste prosjekt går på første forsøk! Utover det er det enkelte innvendinger og reaksjoner som er vanlige: Tailwind kan minne om inline styles, og kan ved første møte se svært rotete ut. Du tenker kanskje også at det etterhvert kan bli utfordrende å vedlikeholde. La oss se nærmere på disse påstandene.
Kjipt med inline-stiling
En vanlig innvending når man først hører om Tailwind er at «er ikke dette bare inline styles»? Og i bunn og grunn er det en del sannhet i det.
Men Tailwinds hjelpeklasser tilbyr noen fordeler over vanlig inline-kode. Klassene er langt mer konsise og treffer et sweet-spot der det kan bli noe mer massivt enn vanlige klassenavn, men fortsatt langt bedre enn hva inline styles med vanlig CSS ville vært.
De største fordelene man får over vanlig CSS, er en raskere vei til responsivt design og enkel tilstandshåndtering. Du kan svært enkelt definere forskjellig design for de forskjellige brytepunkter. Du får også på liknende vis evnen til å definere egen funksjonalitet på hover og fokus, altså tilstandshåndtering.
«Motivasjonen til å bruke Tailwind i stedet for de mer omfattende rammeverkene er kontroll og nærhet til CSS»
Motivasjonen til å bruke Tailwind i stedet for de mer omfattende rammeverkene er kontroll og nærhet til CSS. Alle utviklere, og kanskje spesielt frontend-utviklere, står ofte overfor valget «hva skal jeg lære meg nå».
Jeg har landet på en filosofi som i mange tilfeller har gitt klarhet: når i tvil, fokuser på det mest grunnleggende! Dette mener jeg er et av hovedargumentene for Tailwind kontra rammeverk som Bootstrap.
Må alle prosjekter lage sitt eget komponent-bibliotek?
Tailwind – mener jeg – eksisterer i goldilocks-sonen mellom å få mektig drahjelp med CSS og å komme til skade for å lære enda et nytt rammeverk. Og et gitt rammeverk vet vi jo at kan ende opp med å være mer eller mindre utdatert om få år. Tailwind lar deg ha et 1:1 forhold mellom koden din og CSS-en den representerer. Du vil derfor fortsette å lære om grunnleggende CSS ettersom du tar biblioteket mer og mer i bruk.
Vanskelig å vedlikeholde?
Ok, du har hørt at Tailwind er den nye hotte, freshe tingen å snuse litt på. Du har kanskje til og med tatt steget og prøvd det ut litt, og du synes siden din blir fiffig og koden sexy.
Men vedlikehold kan da umulig være noe særlig? Innen enhver knapp og sentrerte div er tilbakelagt, må jo koden være full av repetisjon og lange tungleste inline stylinger?
Dette rammeverket bør kanskje øremerkes hobbyprosjekter og hackatons der du har mindre tid enn vett – eller hva?
Hjelp - jeg klarer ikke å lage nettsider i 2021!
Nå beveger jeg meg over i noe ukjent land. Selv har jeg kun brukt Tailwind i mindre prosjekter, men hører fra andre at det skal være fult mulig – og til og med en fryd – å oppskalere.
Ett av essene i ermet er muligheten til å dra ut og gruppere repeterende kode. Dette kan gjøres for eksempel med en knapp eller andre elementer som er standard flere steder på siden. Her er det dog viktig å motstå fristelsen til å putte for mye i hver variabel. En av grunnpilarene i Tailwind er at hver klasse skal gjøre så lite som mulig. Nettopp dette med oppskalering og kanskje til og med team er noe undertegnede selv håper å teste ut i tiden som kommer. Jeg er spent, og har troa!
Tailwind er det neste steget i CSS
Når det kommer til syntaks er det mange subjektive preferanser. En av innvendingene du kan få når du vil introdusere Tailwind er at det ser stygt eller rotete ut.
Dette er litt smak og behag. Vil du ha litt mer rot og sammenheklet kode i filene dine, eller vil du ha et mer rotete filsystem med med mer lenking?
Etter å ha brukt Tailwind en stund synes jeg nå prosjekter med .css- eller .sass-filer ser rotete ut, og vil helst slippe å ha en eneste CSS-fil.
Det er nok mest en vanesak. Selv vil jeg våge å gå så langt som å foreslå at Tailwind representerer et logisk neste steg i fremgangen av utvikleropplevelsen.
Slik kommer du i gang med CSS-variabler
Prøv å følg meg her i et eksempel jeg liker: React har nå vært på tronen i mange år, og med React kom JSX. JSX var annerledes enn hva mange var vant til. I stedet for å ha mer eller mindre adskilt HTML og Javascript, introduserte man en måte å tenke på der man blandet markup og funksjonalitet i en og samme mølje. Mange synes dette var rotete, stygt og uhørt.
Siden den gang har veldig mange blitt glad i den nye arbeidsflyten og vil overhodet ikke gå tilbake. Så med dette i tankene, hva representerer Tailwind i det store bildet? Når jeg tar et steg tilbake, ser jeg denne tankegangen som neste logiske steg på denne veien. Enten det ender opp med å være en utgave av CSS-In-JS, eller TailwindCSS.
Vi gikk fra å skille ut HTML, CSS og Javascript i egne filer, til å kombinere HTML og Javascript, mens vi fremdeles skilte ut CSS-en. Med tailwind føler jeg endelig at det er naturlig å skrive markup, funksjonalitet og styling i en og samme flyt. Eureka!
Prøv selv
Om du er nysgjerrig og vil teste det ut, anbefaler jeg å ta med deg en stylesheet-lenke over til Codesandbox og prøve litt.
Dette er helt klart raskeste vei til å få litt grums under neglene og se det i aksjon!
Lenken finner du nederst i installasjonsguiden til Tailwind under “Using Tailwind via CDN”.
I Codesandbox går du inn på et prosjekt og finner «External resources». Klikk utvid og legg inn lenken fra Tailwind (kun adressen, uten HTML-tags etc.) og trykk på «Add resource».
Du kan nå ta i bruk Tailwind!
