Tailwind CSS: Isang Utility-First CSS Framework at API para sa Mabilis, tumutugong Disenyo
Habang nasa malalim ako sa tech sa araw-araw, hindi ako nakakakuha ng maraming oras hangga't nais kong ibahagi ang mga kumplikadong pagsasama at automation na ipinatutupad ng aking kumpanya para sa mga customer. Gayundin, wala akong maraming oras ng pagtuklas. Karamihan sa teknolohiya na isinusulat ko ay mga kumpanya na naghahanap Martech Zone sumasaklaw sa kanila, ngunit bawat isang beses - lalo na sa pamamagitan ng Twitter - nakikita ko ang ilang buzz sa paligid ng isang bagong teknolohiya na kailangan kong ibahagi.
Kung nagtatrabaho ka sa disenyo ng web, pagbuo ng mobile app, o kahit na nag-set up lamang ng isang sistema ng pamamahala ng nilalaman, malamang na nakipagbuno ka sa mga pagkabigo ng mga nakikipagkumpitensyang istilo sa maraming mga styleheet. Kahit na may kamangha-manghang mga tool sa pag-unlad na binuo sa loob ng bawat browser, ang pagsubaybay at paglilinis ng CSS ay maaaring mangailangan ng labis na oras at lakas.
CSS Frameworks
Sa mga nagdaang taon, ang mga taga-disenyo ay gumawa ng isang kamangha-manghang trabaho ng paglabas ng mga koleksyon ng mga estilo na prepped at handa nang gamitin. Ang mga CSS Stylesheet na ito ay mas kilala bilang CSS Frameworks, sinusubukan na mapaunlakan ang lahat ng iba't ibang mga estilo at tumutugon na mga kakayahan upang ang mga developer ay maaaring mag-refer lamang ng isang balangkas sa halip na pagbuo ng isang CSS file mula sa simula. Ang ilang mga tanyag na balangkas ay:
- Bootstrap - isang balangkas na umunlad sa loob ng isang dekada, unang ipinakilala ng Twitter. Nag-aalok ito ng hindi mabilang na mga tampok. Mayroon itong mga downside, na nangangailangan ng SASS, mahirap i-overtake, nakasalalay sa JQquery, at medyo mabigat na mag-load.
- Bulma - isang malinis na balangkas na developer-friendly at walang pagtitiwala sa JavaScript.
- Pundasyon - isang mas generic at kapaki-pakinabang na balangkas ng CSS na may toneladang mga bahagi na madaling napapasadya. Bilang karagdagan, mayroong Foundation para sa Email at Motion UI para sa mga animasyon
- UIKit - isang kumbinasyon ng HTML, JavaScript, at CSS upang mabilis at madali ang pagbuo ng iyong front-end.
I-tailwind ang CSS Framework
Habang ang iba pang mga balangkas ay may mahusay na trabaho ng pagtanggap ng mga sikat na elemento ng interface ng gumagamit, ang Tailwind ay gumagamit ng isang pamamaraan na kilala bilang Atomic CSS. Sa madaling sabi, maingat na inayos ng Tailwind ang mga pangalan ng klase gamit ang natural na wika upang gawin ang sinasabi nilang ginagawa. Kaya, habang ang Tailwind ay walang isang library ng mga bahagi, ang kakayahang madaling bumuo ng isang malakas, tumutugon na interface sa pamamagitan lamang ng pagsangguni sa mga pangalan ng klase ng CSS ay matikas, mabilis, at walang maihahambing.
Narito ang ilang talagang mahusay na mga halimbawa:
Mga Grid ng CSS
Mga Gradient ng CSS
CSS para sa Suporta ng Madilim na Mode
Ang Tailwind ay mayroon ding kamangha-manghang magagamit ang extension para sa VS Code upang madali mong makilala at maipasok ang mga klase mula sa code editor ng Microsoft.
Kahit na mas mapanlikha, awtomatikong tinatanggal ng Tailwind ang lahat ng hindi nagamit na CSS kapag nagtatayo para sa produksyon, na nangangahulugang ang iyong huling bundle ng CSS ay ang pinakamaliit na maaaring maging ito. Sa katunayan, ang karamihan sa mga proyekto ng Tailwind ay nagpapadala ng mas mababa sa 10kB ng CSS sa kliyente.