Tailwind CSS: En Utility-First CSS Framework og API til hurtigt, responsivt design

Tailwind CSS Framework

Selvom jeg dagligt er dybt inde i teknologien, får jeg ikke så meget tid, som jeg gerne vil dele de komplekse integrationer og automatisering, som min virksomhed implementerer for kunderne. Jeg har heller ikke meget opdagelsestid. Det meste af den teknologi, jeg skriver om, er virksomheder, der opsøger Martech Zone dækker dem, men en gang imellem - især via Twitter - ser jeg noget buzz omkring en ny teknologi, som jeg skal dele.

Hvis du arbejder med webdesign, mobilappudvikling eller endda bare opretter et indholdshåndteringssystem, har du sikkert kæmpet med frustrationerne fra konkurrerende stilarter på tværs af flere stylesheets. Selv med de fantastiske udviklingsværktøjer, der er bygget i hver browser, kan sporing og oprydning af CSS kræve alt for meget tid og energi.

CSS-rammer

I de seneste år har designere gjort et ret fantastisk stykke arbejde med at frigive samlinger af stilarter, der er klargjort og klar til brug. Disse CSS -stilark er bedre kendt som CSS Frameworks, og forsøger at rumme alle de forskellige stilarter og responsive muligheder, så udviklere bare kan referere til en ramme frem for at bygge en CSS -fil fra bunden. Nogle populære rammer er:

  • Bootstrap - en ramme, der har udviklet sig i løbet af et årti, først introduceret af Twitter. Det tilbyder utallige funktioner. Det har ulemper, der kræver SASS, svært at overskrive, afhængigt af JQquery, og det er ret heftigt at indlæse.
  • Bulma -en ren ramme, der er udviklervenlig og ikke er afhængig af JavaScript.
  • Foundation - en mere generisk og anvendelig CSS -ramme, der har masser af komponenter, der let kan tilpasses. Derudover er der Fundament til e -mail og Motion UI til animationer.
  • UI-sæt -en kombination af HTML, JavaScript og CSS for at få din frontend udviklet hurtigt og nemt.

Tailwind CSS Framework

Mens andre rammer gør et godt stykke arbejde med at rumme populære brugergrænsefladeelementer, bruger Tailwind en metode kendt som Atomisk CSS. Kort sagt organiserede Tailwind genialt klassens navne ved hjælp af naturligt sprog til at gøre det, de siger, de gør. Så selvom Tailwind ikke har et bibliotek med komponenter, er muligheden for let at bygge en kraftfuld, lydhør grænseflade bare ved at henvise til CSS -klassenavne elegant, hurtig og uforlignelig.

Her er nogle virkelig gode eksempler:

CSS gitter

css kolonne start gitter kolonner

CSS gradienter

css gradienter

CSS til understøttelse af Dark Mode

css mørk tilstand

Medvind har også en fantastisk udvidelse til rådighed for VS -kode, så du nemt kan identificere og indsætte klasser fra Microsofts kodeditor.

Endnu mere genialt fjerner Tailwind automatisk al ubrugt CSS, når den bygges til produktion, hvilket betyder, at din sidste CSS -pakke er den mindste, den muligvis kan være. Faktisk sender de fleste Tailwind -projekter mindre end 10 kB CSS til klienten.

Hvad mener du?

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.