Tailwind CSS: Utility-First CSS Framework ja API nopeaa, reagoivaa suunnittelua varten

Tailwind CSS -kehys

Vaikka olen syvällä tekniikan parissa päivittäin, minulla ei ole niin paljon aikaa kuin haluaisin jakaa monimutkaisia ​​integraatioita ja automaatiota, joita yritykseni toteuttaa asiakkaille. Lisäksi minulla ei ole paljon löytöaikaa. Suurin osa kirjoittamastani tekniikasta on yrityksiä, jotka etsivät Martech Zone kattaa ne, mutta silloin tällöin - erityisesti Twitterin välityksellä - näen jonkinlaista buzzia uuden tekniikan ympärillä, joka minun on jaettava.

Jos työskentelet web -suunnittelun, mobiilisovellusten kehittämisen tai jopa vain perustaaksesi sisällönhallintajärjestelmän, olet todennäköisesti kamppaillut kilpailevien tyylien turhautumisen kanssa useissa tyylitaulukoissa. Vaikka jokaiseen selaimeen on rakennettu hämmästyttäviä kehitystyökaluja, CSS: n jäljittäminen ja puhdistaminen voi vaatia aivan liikaa aikaa ja energiaa.

CSS-kehykset

Viime vuosina suunnittelijat ovat tehneet melko hämmästyttävää työtä julkaistessaan valmiita ja käyttövalmiita tyylikokoelmia. Nämä CSS -tyylitaulukot tunnetaan paremmin nimellä CSS -kehykset, jotka yrittävät ottaa huomioon kaikki eri tyylit ja reagointikyvyt, jotta kehittäjät voivat vain viitata kehykseen sen sijaan, että rakentaisivat CSS -tiedoston alusta. Jotkut suositut kehykset ovat:

  • Bootstrap - kehys, joka on kehittynyt yli vuosikymmenen, ensimmäisenä Twitterissä. Se tarjoaa lukemattomia ominaisuuksia. Sillä on huonot puolensa, jotka vaativat SASS: n, vaikea ylittää, riippuen JQquerystä, ja se on melko raskas ladata.
  • löytää -puhdas kehys, joka on kehittäjäystävällinen eikä ole riippuvainen JavaScriptistä.
  • perusta - yleisempi ja käyttökelpoisempi CSS -kehys, jossa on tonnia helposti muokattavia komponentteja. Lisäksi on Säätiö sähköpostille että Liike-käyttöliittymä animaatioita varten.
  • Käyttöliittymäpaketti -HTML-, JavaScript- ja CSS-yhdistelmä käyttöliittymän kehittämiseksi nopeasti ja helposti.

Tailwind CSS -kehys

Vaikka muut kehykset tekevät hienoa työtä mukautettaessa suosittuja käyttöliittymäelementtejä, Tailwind käyttää menetelmää, joka tunnetaan nimellä Atomic CSS. Lyhyesti sanottuna Tailwind järjesti nerokkaasti luokkien nimet käyttäen luonnollista kieltä tekemään mitä he sanovat tekevänsä. Joten vaikka Tailwindillä ei ole komponenttikirjastoa, kyky rakentaa helposti tehokas ja reagoiva käyttöliittymä vain viittaamalla CSS -luokkien nimiin on tyylikäs, nopea ja vertaansa vailla.

Tässä on todella hienoja esimerkkejä:

CSS-ruudukot

css -sarakkeen aloitusruudukon sarakkeet

CSS -kaltevuudet

css -kaltevuudet

CSS tumman tilan tuelle

css tumma tila

Tailwindissä on myös fantastinen laajennus saatavilla VS -koodille, jotta voit helposti tunnistaa ja lisätä luokkia Microsoftin koodieditorista.

Vielä kekseliämpää, Tailwind poistaa automaattisesti kaikki käyttämättömät CSS -tiedostot, kun rakennamme tuotantoa varten, mikä tarkoittaa, että lopullinen CSS -nippusi on pienin mahdollinen. Itse asiassa useimmat Tailwind -projektit toimittavat asiakkaalle alle 10 kt CSS: ää.

Mitä mieltä olet?

Tämä sivusto käyttää Akismetiä roskapostin vähentämiseksi. Lue, miten kommenttitietosi käsitellään.