Tailwind CSS: un marc i una API CSS de primera utilitat per a un disseny ràpid i sensible

Tailwind CSS Framework

Tot i que estic aprofundit en la tecnologia diàriament, no tinc tant de temps com voldria compartir les complexes integracions i automatismes que la meva empresa implementa per als clients. A més, no tinc gaire temps per descobrir. La majoria de la tecnologia que escric són empreses que busquen Martech Zone cobrint-los, però de tant en tant, sobretot a través de Twitter, veig un brunzit sobre una nova tecnologia que necessito compartir.

Si treballeu en el disseny de llocs web, el desenvolupament d’aplicacions mòbils o, fins i tot, simplement configureu un sistema de gestió de contingut, probablement hàgiu lluitat amb les frustracions d’estils competitius en diversos fulls d’estil. Fins i tot amb les sorprenents eines de desenvolupament incorporades a cada navegador, el seguiment i la neteja de CSS poden requerir massa temps i energia.

Marcadors CSS

En els darrers anys, els dissenyadors han fet una tasca bastant sorprenent alliberant col·leccions d’estils preparats i preparats per utilitzar. Aquests fulls d’estil CSS són més coneguts com a CSS Frameworks, intentant adaptar-se a tots els estils i capacitats de resposta diferents, de manera que els desenvolupadors només poden fer referència a un framework en lloc de crear un fitxer CSS des de zero. Alguns marcs populars són:

  • Bootstrap - Un marc que ha evolucionat al llarg d’una dècada, introduït per primera vegada per Twitter. Ofereix infinitat de funcions. Té desavantatges, que requereixen SASS, difícil de fer excessivament, depenent de JQquery, i és bastant pesat de carregar.
  • Bulma - Un marc net i apte per a desenvolupadors i que no depèn de JavaScript.
  • Fundació - Un marc CSS més genèric i útil que té un munt de components fàcilment personalitzables. A més, hi ha Fundació per al correu electrònic Interfície d'usuari del moviment per a animacions.
  • Kit d'interfície d'usuari - una combinació d'HTML, JavaScript i CSS per aconseguir que el vostre frontal es desenvolupi de forma ràpida i senzilla.

Tailwind CSS Framework

Tot i que altres marcs fan una gran feina per acomodar elements populars de la interfície d’usuari, Tailwind utilitza una metodologia coneguda com CSS atòmic. En resum, Tailwind va organitzar enginyosament els noms de les classes fent servir el llenguatge natural per fer el que diuen que fan. Per tant, tot i que Tailwind no té una biblioteca de components, la capacitat de crear fàcilment una interfície potent i sensible només fent referència als noms de classes CSS és elegant, ràpida i incomparable.

Aquests són alguns exemples realment fantàstics:

Graelles CSS

columna css columnes de quadrícules d'inici

Gradients CSS

gradients css

Suport CSS per a mode fosc

css mode fosc

Tailwind també té un fantàstic extensió disponible per a VS Code perquè pugueu identificar i inserir classes fàcilment des de l'editor de codis de Microsoft.

Encara més enginyós, Tailwind elimina automàticament tots els CSS no utilitzats quan es construeixen per a la producció, cosa que significa que el vostre paquet CSS final és el més petit que podria ser. De fet, la majoria dels projectes de Tailwind envien menys de 10 KB de CSS al client.