Tailwind CSS: Utility-First CSS okvir i API za brzo i prilagodljivo projektiranje

Tailwind CSS okvir

Iako sam svakodnevno duboko u tehnologiji, nemam toliko vremena koliko bih želio podijeliti složenu integraciju i automatizaciju koju moja tvrtka implementira za kupce. Također, nemam puno vremena za otkrivanje. Većina tehnologije o kojoj pišem su tvrtke koje traže Martech Zone pokrivajući ih, ali s vremena na vrijeme - osobito putem Twittera - vidim neki šum oko nove tehnologije koju moram podijeliti.

Radite li na web dizajnu, razvoju mobilnih aplikacija ili čak samo postavljate sustav za upravljanje sadržajem, vjerojatno ste se borili s frustracijama konkurentskih stilova u više tablica stilova. Čak i uz nevjerojatne razvojne alate ugrađene u svaki preglednik, praćenje i čišćenje CSS -a može zahtijevati previše vremena i energije.

CSS okviri

Posljednjih godina dizajneri su učinili prilično nevjerojatan posao objavljujući kolekcije stilova koji su pripremljeni i spremni za upotrebu. Ove CSS tablice stilova poznatije su kao CSS okviri, pokušavajući prilagoditi sve različite stilove i sposobnosti odaziva, tako da programeri mogu samo referencirati okvir, a ne graditi CSS datoteku od nule. Neki popularni okviri su:

  • Bootstrap - okvir koji je evoluirao tijekom desetljeća, a prvi ga je uveo Twitter. Nudi bezbroj mogućnosti. Ima svojih loših strana, zahtijeva SASS, teško ih je prebrisati, ovisi o JQqueryju, a učitavanje je prilično veliko.
  • naći -čisti okvir prilagođen programerima i koji ne ovisi o JavaScriptu.
  • Temelj - općenitiji i upotrebljiviji CSS okvir s mnoštvom komponenti koje se lako mogu prilagoditi. Osim toga, postoji Zaklada za e -poštu i Motion UI za animacije.
  • Komplet korisničkog sučelja -kombinacija HTML-a, JavaScript-a i CSS-a za brzi i lak razvoj vašeg front-end-a.

Tailwind CSS okvir

Dok drugi okviri odlično rade s prilagođavanjem popularnih elemenata korisničkog sučelja, Tailwind koristi metodologiju poznatu kao Atomski CSS. Ukratko, Tailwind je genijalno organizirao imena razreda koristeći prirodni jezik kako bi učinili ono što kažu da rade. Dakle, iako Tailwind nema biblioteku komponenti, mogućnost jednostavne izgradnje snažnog, osjetljivog sučelja samo pozivanjem na nazive klasa CSS -a elegantna je, brza i neusporediva.

Evo nekoliko zaista izvrsnih primjera:

CSS mreže

css stupci početne rešetke stupaca stupci

CSS gradijenti

css gradijenti

CSS za podršku tamnom načinu rada

css tamni način rada

Tailwind također ima fantastično dostupno proširenje za VS Code tako da možete jednostavno identificirati i umetnuti klase iz Microsoftovog uređivača koda.

Još genijalnije, Tailwind automatski uklanja sav neiskorišteni CSS prilikom izrade za proizvodnju, što znači da je vaš konačni paket CSS -a najmanji mogući. Zapravo, većina projekata Tailwind -a klijentu isporučuje manje od 10 KB CSS -a.

Što vi mislite?

Ova web stranica koristi Akismet za smanjenje neželjene pošte. Saznajte kako se podaci vašeg komentara obrađuju.