Tailwind CSS: Fframwaith CSS Utility-First ac API ar gyfer Dylunio Cyflym, Ymatebol

Fframwaith CSS Tailwind

Er fy mod yn ddwfn i dechnoleg yn ddyddiol, nid wyf yn cael cymaint o amser ag yr hoffwn rannu'r integreiddiadau a'r awtomeiddio cymhleth y mae fy nghwmni'n eu rhoi ar waith ar gyfer cwsmeriaid. Yn ogystal, does gen i ddim llawer o amser darganfod. Mae'r rhan fwyaf o'r dechnoleg rydw i'n ysgrifennu amdani yn gwmnïau sy'n chwilio amdani Martech Zone yn eu gorchuddio, ond bob yn hyn a hyn - yn enwedig trwy Twitter - rwy'n gweld rhywfaint o wefr o amgylch technoleg newydd y mae angen i mi ei rhannu.

Os ydych chi'n gweithio ym maes dylunio gwe, datblygu apiau symudol, neu hyd yn oed newydd sefydlu system rheoli cynnwys, mae'n debyg eich bod wedi ymgodymu â rhwystredigaethau arddulliau cystadleuol ar draws sawl taflen arddull. Hyd yn oed gyda'r offer datblygu anhygoel sydd wedi'u hadeiladu ym mhob porwr, gall olrhain a glanhau CSS ofyn am lawer gormod o amser ac egni.

Fframweithiau CSS

Yn ystod y blynyddoedd diwethaf, mae dylunwyr wedi gwneud gwaith eithaf anhygoel o ryddhau casgliadau o arddulliau sydd wedi'u prepio ac yn barod i'w defnyddio. Mae'r Taflenni Steiliau CSS hyn yn fwy adnabyddus fel CSS Frameworks, gan geisio darparu ar gyfer yr holl wahanol arddulliau a galluoedd ymatebol fel y gall datblygwyr gyfeirio at fframwaith yn hytrach nag adeiladu ffeil CSS o'r dechrau. Dyma rai fframweithiau poblogaidd:

  • Bootstrap - fframwaith sydd wedi esblygu dros ddegawd, a gyflwynwyd gyntaf gan Twitter. Mae'n cynnig nodweddion di-ri. Mae ganddo anfanteision, sy'n gofyn am SASS, yn anodd ei or-wylio, yn dibynnu ar JQquery, ac mae'n eithaf hefty i'w lwytho.
  • dod o hyd i - fframwaith glân sy'n gyfeillgar i ddatblygwyr ac nad yw'n dibynnu ar JavaScript.
  • Sylfaen - fframwaith CSS mwy generig a defnyddiadwy sydd â thunelli o gydrannau sy'n hawdd eu haddasu. Yn ogystal, mae yna Sefydliad E-bost ac Cynnig UI ar gyfer animeiddiadau.
  • Kit UI - cyfuniad o HTML, JavaScript, a CSS i gael eich pen blaen i ddatblygu'n gyflym ac yn hawdd.

Fframwaith CSS Tailwind

Er bod fframweithiau eraill yn gwneud gwaith gwych o ddarparu ar gyfer elfennau rhyngwyneb defnyddiwr poblogaidd, mae Tailwind yn defnyddio methodoleg o'r enw CSS Atomig. Yn fyr, trefnodd Tailwind enwau'r dosbarth yn ddyfeisgar gan ddefnyddio iaith naturiol i wneud yr hyn maen nhw'n dweud maen nhw'n ei wneud. Felly, er nad oes gan Tailwind lyfrgell o gydrannau, mae'r gallu i adeiladu rhyngwyneb pwerus, ymatebol yn hawdd trwy gyfeirio at enwau dosbarth CSS yn gain, yn gyflym ac yn ddigymar.

Dyma rai enghreifftiau gwirioneddol wych:

Gridiau CSS

colofnau gridiau cychwyn colofn css

Graddiannau CSS

graddiannau css

CSS ar gyfer Cymorth Modd Tywyll

modd tywyll css

Mae gan Tailwind hefyd ffantastig estyniad ar gael ar gyfer VS Code fel y gallwch chi adnabod a mewnosod dosbarthiadau yn hawdd gan olygydd cod Microsoft.

Hyd yn oed yn fwy dyfeisgar, mae Tailwind yn cael gwared ar yr holl CSS nas defnyddiwyd yn awtomatig wrth adeiladu ar gyfer cynhyrchu, sy'n golygu mai'ch bwndel CSS terfynol yw'r lleiaf y gallai fod o bosibl. Mewn gwirionedd, mae'r rhan fwyaf o brosiectau Tailwind yn anfon llai na 10kB o CSS i'r cleient.

Beth ydych chi'n feddwl?

Mae'r wefan hon yn defnyddio Akismet i leihau sbam. Dysgwch sut mae eich data sylwadau yn cael ei brosesu.