Allt sem þú þarft að vita um Tailwind CSS

Í þessari grein verður um fjallað um Tailwind CSS, við munum greina frá mikilvægustu eiginleikum þess fyrir 1xINTERNET og útskýra hvers vegna við höfum tileinkað okkur Tailwind sem CSS ramma.Tailwind CSS virkar vel með Drupal, Symfony, Twig, ReactJS og vefíhlutum (e. web components). Við munum sýna hvernig við höfum náð að tengja þessa mismunandi tækni saman á skilvirkan hátt og einnig sýna kóðadæmi.

Hvað er Tailwind CSS?

Tailwind er CSS rammi og er notaður sem “stíliseringar”-verkfæri (e. styling tool). Þessi tækni dregur verulega úr þróunartíma notendaviðmóta og gætir samræmis í þemaferlinu.

Flestir UI rammar bjóða upp á fyrirfram skilgreinda íhluti í ákveðnum stíl. Tailwind CSS býður aftur á móti upp á “low-level utility classes”, sem þýðir að hönnuðir hafa meira svigrúm til að búa til einstaka hönnun þar sem hægt er að sérsníða og stækka klasana (e. classes). Þannig getum við mætt þörfum viðskiptavinarins og sköpunargáfa hönnuðarins fær að njóta sín.

Þessi nálgun veitir sveigjanleika, auðveldar stjórnun og gerir okkur kleift að viðhalda samræmi.

Af hverju Tailwind CSS?

Á heildina litið er Tailwind CSS sveigjanlegt og skilvirkt verkfæri. Ramminn byggir á svokallaðri “utility-first” nálgun sem býður upp á sérsníðanleg og endurnýtanleg hönnunarkerfi. Þessi nálgun sparar okkur tíma og fyrirhöfn meðan á þróunarferlinu stendur og hjálpar til við að viðhalda samræmdri og dýnamískri hönnun.

“Utility-first” nálgun

Tailwind er “utility-first” CSS rammi, sem þýðir að lögð er áhersla á að flýta fyrir stíliseringarferlinu og gera það skiljanlegra.

Eins og áður hefur komið fram; í stað þess að bjóða upp á sett af fyrirfram skilgreindum stílum eða íhlutum býður Tailwind upp á sett af utility klösum. Klasarnir eru merktir með skýrum nöfnum og þá er hægt að aðlaga og stækka og síðan nota til að smíða og sérsníða þá þætti sem verða að notendaviðmóti.

Þetta gerir það að verkum að hönnuðir hafa meira svigrúm til að vera skapandi en geta á sama tíma sett saman samræmd hönnunarviðmið. Jafnframt geta forritarar notaða klasana og svo fínstillt smáatriði til að passa að allt sé í samræmi við hönnunina.

Niðurstaðan er sú að viðskiptavinurinn uppsker sérsniðið útlit sem endurspeglar vörumerkið og þróunin tekur mun styttri tíma.

Það mikilvægasta við utility klasa er að þeir séu skiljanlegir og merkingin skýr. Í stað þess að þurfa að finna upp nafnavenjur fyrir klasana eru nöfnin innifalin þegar klasarnir eru notaðir.

Hér koma nokkur dæmi:

bg-white // bg means background and “white” is the colour p-3 // p means padding m-3 // m means margin and “3” the amount applied

Þar að auki er hægt að nota þessa klasa með skilyrðum, t.d. út frá skjástærð, þema notandans eða hvað bendillinn er að gera (hover, fókus...).

Fleiri dæmi:

dark:bg-black // dark: will only apply when on dark mode sm:p-3 // sm: will only apply for mobile screensize hover:text-red // hover: will only apply when hovering

Skilgreindu hönnunarkerfi

Tailwind config skráin (e. file) virkar eins og miðlægur upplýsingabanki (e. single point of truth) sem geymir allar grunnupplýsingar um stíliseringar- og þemaferlið.

Við getum sérsniðið fyrirfram skilgreindar Tailwind stíliseringar eða stækkað þær með því að bæta við litum, bilum, hreyfimyndum o.s.frv.

Þannig er allur grunnurinn að útliti og tilfinningu vefsíðunnar skilgreindur á einum stað og við getum nálgast þær upplýsingar hratt; skoðað, viðhaldið og lagað.

Hönnuðir geta fylgst betur með raunverulegri útfærslu hugmynda sinna og geta jafnvel gert breytingar á hönnunartáknum (e. design tokens) upp á eigin spýtur með því að athuga stillingarnar (e. configuration). Samband hönnuða og forritara er einfaldað þar sem config skráin verður að nokkurs konar “stíliseringarsamningi” þeirra á milli.

Sem dæmi:

module.exports = {  content: ['./src/**/*.{html,js}'],  theme: {    colors: {      'brand': '#1fb6ff',      'secondary': '#7e5bef',    },    fontFamily: {      sans: ['Graphik', 'sans-serif'],      serif: ['Merriweather', 'serif'],    },    extend: {      spacing: {        '8xl': '96rem',        '9xl': '128rem',      },    }  }, }

Í config skránni getum við séð hvar í efninu er verið að nota Tailwind klasa, ef litum og leturgerð er hnekkt (e. overridden) og ef búið er að auka bil (e. spacing).

Engin takmörk

Bestu starfsvenjur Tailwind gera ráð fyrir því að “config”-ið sé notað eins og upplýsingabanki. Það þýðir þó ekki að þú getir ekki uppfært bankann eða notað sérsniðin gildi (e. values) til þess að innleiða þá hönnun sem hönnuðurinn bjó til, af mikilli nákvæmni.

Sem dæmi:

p-[22px] // will apply 22px of padding w-[calc(100%-20px)] // will apply the calculated width

Framkvæmdu einu sinni og endurnýttu

Tailwind íbætur (e. plug-ins) gera þér kleift að hjúpa (e. encapsulate) flóknar stíliseringar inn í sérsniðna utility klasa. Seinna meir getur þú svo innleitt þær íbætur og endurnýtt stíliseringarnar í hvaða verkefni sem er. Þetta er kallað “out-of-the-box”; þegar eiginleikar eru tilbúnir til notkunar “beint úr kassanum”.

Til dæmis:

const plugin = require('tailwindcss/plugin') module.exports = {  plugins: [    plugin(function({ addComponents }) {      addComponents({        '.btn-demo': {          padding: '.5rem 1rem',          borderRadius: '.25rem',          fontWeight: '600',        },        '.btn-demo-blue': {          backgroundColor: '#3490dc',          color: '#fff',        },        '.btn-demo-red': {          backgroundColor: '#e3342f',          color: '#fff',        },      })    })  ] }

Að auki gera Tailwind forstillingar (e. presets) þér kleift að flytja út og endurnýta heilar config skrár úr Tailwind. Við getum auðveldlega skilgreint grunnþema eða stillingar sem innihalda hina ýmsu eiginleika og viðhaldið því án þess að það hafi áhrif á sérsniðnar stillingar þess verkefnis sem endurnýtir forstillingarnar.

Dragðu úr stærð og tryggðu frammistöðu

Tailwind býður upp á mismunandi aðferðir sem eru taldar „tilbúnar til framleiðslu“. Þessar aðferðir eru notaðar til að búa til stíliseringar og minnka þær eins og mögulegt er. 

Við getum til dæmis fargað öllum klösum sem við eru skráðir í stillingunum (e. config), þar á meðal fyrirfram skilgreindu Tailwind klösunum, ef þeir eru ekki notaðir í sniðmátunum okkar.

Við getum líka notað “jit” sem stendur fyrir “just in time”. Í þessum ham býr Tailwind til CSS skrá á staðnum þegar þess gerist þörf.

Þessar aðferðir draga úr magni CSS skráa sem verkefnið notar sem þýðir að vefsíðan eða forritið verður “léttara” og hleðslutíminn verður töluvert styttri.

Minntu þig á bestu starfsvenjur

Aðferðirnar sem Tailwind styðst við geta leitt til endurtekinna kóða og stíliseringa. Þegar forritararnir endurtaka ítrekað sömu uppbygginguna fyrir stíliseringu, er þeim beint á að búa frekar til layout eða íhluti sem er síðan hægt að sameina og endurnýta.

Forritarar eru í raun hvattir til að fylgja viðmiðum á borð við DRY (Do not Repeat Yourself), “seperation of concerns” og einingastig (e. modularity).

Þetta á líka við um það þegar forritarar eru að skrifa marga klasa fyrir einn þátt (e. element). Ef að stíliseringin fyrir einn tiltekinn þátt er orðin mjög löng og flókin, er hugsanlega kominn tími á að finna betri ívafsstrúktúr (e. markup structure) til þess að einfalda verkið en ná samt sömu niðurstöðu.

Opinn hugbúnaður

Tailwind er opinn hugbúnaður (e. open-source) sem þýðir að frumkóðinn er aðgengilegur öllum til notkunar; hver sem er má gera breytingar á kóðanum, dreifa honum og bæta hann.

Hverjir eru kostir þess að Tailwind sé opinn hugbúnaður?

Viðaukar og verkfæri

Það getur verið flókið að nota Tailwind ef ekki er búið að undirbúa IDE og viðbætur (e. extensions).

Stundum geta vandamál komið upp, sem dæmi má nefna þegar forritari þarf að leggja nýja utility klasa á minnið, kóðinn getur hafa stækkað vegna þess að klasastíliseringarnar eru of flóknar eða þegar það er ekki á hreinu hvaða klasa er verið að nota.

Góðu fréttirnar eru þær að það eru margar viðbætur í boði til að virkja sjálfvirka útfyllingu kóða (e. code autocompletion), fela langa og flókna klasa eða til að flokka Tailwind klasana.

Stendur Tailwind öðrum CSS römmum framar?

Það fer alfarið eftir sérstökum þörfum og markmiðum verkefnis hvaða CSS rammi hentar best.

Tailwind CSS ramminn hefur ákveðna eiginleika sem gætu hugsanlega gert það að verkum að hann henti sumum verkefnum frekar en aðrir rammar.

Af hverju ættir þú að velja Tailwind fram yfir aðra CSS ramma?

Allir þessir eiginleikar sem Tailwind CSS hefur upp á að bjóða; Utility-first nálgunin, aðlögunarhæfni, afköst, samræmi og einfaldleiki í notkun, gera það að verkum að þróunin verður hraðari, þemu eru mjög öflug, sérkenni vörumerkisins njóta sín betur og vefsíðan fullkomnari.

Hvernig notum við Tailwind hjá 1xINTERNET?

Tæknistaflinn sem við notum í framenda samanstendur af eftirfarandi tækni:

• Drupal theme layer með Twig
• ReactJS öpp bæði fyrir stakar vefsíður og ívafin (e. embedded) vefsíðuforrit
• Vefíhlutir til þess að búa til endurnýtanlega þætti fyrir framendatækni og hönnunarkerfi

Yfirleitt notum við alla þessa tækni þegar við búum til framenda. Dæmigert vefverkefni mynda innihalda hefðbundinn framenda með Drupal theme layer, en allir gagnvirkir þættir vefsíðunnar væru byggðir með ReactJS. Í mörgum tilfellum er þetta besta uppsetningin.

Lestu meira um hvers vegna það er góður kostur að para saman framendatækni Drupal og ReactJS

Sameiginlegu þættirnir í Twig og React eru smíðaðir með vefíhlutum. Dæmi um sameiginlega þætti eru hnappar, spjöld, flipar, listar o.s.frv. Til að auðvelda yfirferð á sameiginlegum þáttum, setjum við þá upp sem hönnunarkerfi.

Við notum Tailwind CSS fyrir alla tækni og samnýtum stillingarnar (e. configuration). Þegar gerðar eru breytingar á hönnuninni í Tailwind CSS eru þær strax yfirfærðar á alla vefíhluti, öll Twig sniðmát og öll React öpp á vefsíðu.

Þetta auðveldar forriturunum okkar að gera breytingar í framendanum í samræmi við hönnunina. Stíliseringarferlið verður skýrara fyrir alla tækni. Þetta á við um hvaða verkefni sem er. Hönnuðir geta unnið saman þvert á verkefni vegna þess að við reynum að endurnýta framendatækni okkar eins mikið og mögulegt er.

Stafrænn Upplifunarvettvangur (DXP)

Okkar helsta lausn, DXP, er vefvettvangur sem við notum fyrir öll verkefni. Lausnin samanstendur af Drupal vefumsjónarkerfi og tilbúnu “theming layer” sem notar vefíhluti.

Henni fylgir einnig samþætt hönnunarkerfi sem er auðvelt að setja upp og vinna með í Figma. Theming layer og vefíhlutasafnið er búið til með Tailwind CSS.

Verkefni fyrir viðskiptavini

Flest verkefni sem við framkvæmum eru byggð á DXP lausninni okkar og þar af leiðandi byggir grunnurinn á Tailwind forstillingunum og Quartz sem hönnunarkerfi.

Því næst getum við aðlagað verkefnið að þörfum viðskiptavinarins en þar sem stíliseringarkerfið okkar er staðlað í öllum verkefnum verða afköstin meiri og við getum tryggt samræmi og góðan árangur.

Frá forriturunum okkar

"Mér finnst mjög gagnlegt að geta búið til viðbætur (e. plug-ins) sem verða að sérsniðnum utility klösum, en þetta er eitthvað sem ég hef ekki séð í öðrum römmum sem ég hef notað.

Það er mun fljótlegra að skrifa CSS með notkun utility klasa, þegar þú hefur lagt þá á minnið".

John Durance, Full Stack forritari hjá 1xINTERNET