Tailwind CSS: un cadru CSS și un API CSS pentru design rapid, receptiv

Cadru CSS Tailwind

În timp ce sunt adânc în tehnologie în fiecare zi, nu primesc atât de mult timp cât aș dori să împărtășesc integrările complexe și automatizarea pe care compania mea o implementează pentru clienți. De asemenea, nu am mult timp de descoperire. Majoritatea tehnologiei despre care scriu sunt companii care caută Martech Zone acoperindu-le, dar din când în când - mai ales prin Twitter - văd oarecare zgomot în jurul unei noi tehnologii pe care trebuie să o împărtășesc.

Dacă lucrați în design web, dezvoltare de aplicații mobile sau chiar pur și simplu configurați un sistem de gestionare a conținutului, probabil că v-ați luptat cu frustrările stilurilor concurente pe mai multe foi de stil. Chiar și cu uimitoarele instrumente de dezvoltare construite în fiecare browser, depistarea și curățarea CSS poate necesita mult prea mult timp și energie.

Cadre CSS

În ultimii ani, designerii au făcut o treabă destul de uimitoare de a elibera colecții de stiluri care sunt pregătite și gata de utilizare. Aceste foi de stil CSS sunt mai bine cunoscute sub numele de cadre CSS, încercând să acomodeze toate stilurile diferite și capacitățile de reacție, astfel încât dezvoltatorii să poată face referire doar la un cadru, mai degrabă decât să construiască un fișier CSS de la zero. Unele cadre populare sunt:

  • Bootstrap - un cadru care a evoluat de-a lungul unui deceniu, introdus pentru prima dată de Twitter. Oferă nenumărate funcții. Are dezavantaje, care necesită SASS, dificil de supravegheat, dependent de JQquery și este destul de greu de încărcat.
  • găsi - un cadru curat, ușor de dezvoltat și care nu depinde de JavaScript.
  • Fundație - un cadru CSS mai generic și mai util, care are tone de componente care sunt ușor de personalizat. În plus, există Fundație pentru e-mail și Propunere UI pentru animații.
  • Kit UI - o combinație de HTML, JavaScript și CSS pentru a vă dezvolta front-end-ul rapid și ușor.

Cadru CSS Tailwind

În timp ce alte cadre fac o treabă excelentă de a găzdui elemente populare ale interfeței de utilizator, Tailwind folosește o metodologie cunoscută sub numele de CSS atomic. Pe scurt, Tailwind a organizat ingenios numele claselor folosind un limbaj natural pentru a face ceea ce spun ei că fac. Deci, în timp ce Tailwind nu are o bibliotecă de componente, abilitatea de a construi cu ușurință o interfață puternică și receptivă doar prin referirea la numele claselor CSS este elegantă, rapidă și incomparabilă.

Iată câteva exemple foarte bune:

Grile CSS

coloană css coloane grile de pornire

Gradiente CSS

gradienți css

Suport CSS pentru Dark Mode

css mod întunecat

Tailwind are, de asemenea, un fantastic extensie disponibilă pentru VS Code, astfel încât să puteți identifica și insera cu ușurință clase din editorul de cod Microsoft.

Chiar și mai ingenios, Tailwind elimină automat toate CSS-urile neutilizate atunci când se construiește pentru producție, ceea ce înseamnă că pachetul dvs. CSS final este cel mai mic posibil. De fapt, majoritatea proiectelor Tailwind livrează clientului mai puțin de 10 KB de CSS.

Ce părere ai?

Acest site folosește Akismet pentru a reduce spamul. Aflați cum sunt procesate datele despre comentarii.