Tailwind CSS: A Utility-First CSS Framework and API for Rapid, Responsive Design

Tailwind CSS Framework

Selv om jeg er dypt inne i teknologien daglig, får jeg ikke så mye tid som jeg vil dele de komplekse integrasjonene og automatiseringen som firmaet mitt implementerer for kundene. I tillegg har jeg ikke mye oppdagelsestid. Det meste av teknologien jeg skriver om er selskaper som søker Martech Zone dekker dem, men av og til - spesielt via Twitter - ser jeg noe surr rundt en ny teknologi som jeg må dele.

Hvis du jobber med webdesign, mobilapputvikling eller til og med bare konfigurerer et innholdshåndteringssystem, har du sannsynligvis slitt med frustrasjonene fra konkurrerende stiler på tvers av flere stilark. Selv med de fantastiske utviklingsverktøyene som er bygget i hver nettleser, kan sporing og opprydding av CSS kreve altfor mye tid og energi.

CSS Frameworks

I de siste årene har designere gjort en ganske fantastisk jobb med å gi ut samlinger av stiler som er forberedt og klare til bruk. Disse CSS -stilarkene er bedre kjent som CSS Frameworks, og prøver å imøtekomme alle de forskjellige stilene og responsive mulighetene, slik at utviklere bare kan referere til et rammeverk i stedet for å bygge en CSS -fil fra bunnen av. Noen populære rammer er:

  • Bootstrap - et rammeverk som har utviklet seg over et tiår, først introdusert av Twitter. Den tilbyr utallige funksjoner. Det har ulemper, som krever SASS, vanskelig å overskrive, avhengig av JQquery, og det er ganske heftig å laste.
  • finne -et rent rammeverk som er utviklervennlig og ikke er avhengig av JavaScript.
  • Fundament - et mer generisk og brukbart CSS -rammeverk som har tonnevis av komponenter som enkelt kan tilpasses. I tillegg er det Stiftelse for e -post og Bevegelsesgrensesnitt for animasjoner.
  • UI-sett -en kombinasjon av HTML, JavaScript og CSS for å få front-end utviklet raskt og enkelt.

Tailwind CSS Framework

Mens andre rammer gjør en god jobb med å imøtekomme populære brukergrensesnittelementer, bruker Tailwind en metode kjent som Atomisk CSS. Kort sagt, Tailwind organiserte klassisk navn på en genial måte ved å bruke naturlig språk for å gjøre det de sier de gjør. Så selv om Tailwind ikke har et bibliotek med komponenter, er muligheten til enkelt å bygge et kraftig, responsivt grensesnitt bare ved å referere til CSS -klassenavn elegant, raskt og makeløst.

Her er noen virkelig gode eksempler:

CSS-nett

css -kolonne med startgitter for kolonner

CSS Gradienter

css gradienter

Støtte for CSS for Dark Mode

css mørk modus

Medvind har også en fantastisk utvidelse tilgjengelig for VS -kode, slik at du enkelt kan identifisere og sette inn klasser fra Microsofts kodeditor.

Enda mer genialt, Tailwind fjerner automatisk all ubrukt CSS når den bygges for produksjon, noe som betyr at den siste CSS -pakken din er den minste den kan være. Faktisk sender de fleste Tailwind -prosjektene mindre enn 10 kB CSS til klienten.

Hva tror du?

Dette nettstedet bruker Akismet for å redusere spam. Lær hvordan kommentaren din behandles.