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.

If you work in web design, mobile app development, or even just set up a content management system, you’ve probably wrestled with the frustrations of competing styles across multiple stylesheets. Even with the amazing development tools built within each browser, tracking down and cleaning up CSS can require far too much time and energy.

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 – a framework that’s evolved over a decade, first introduced by Twitter. It offers countless features. It does have downsides, requiring SASS, difficult to overwreied, dependent on JQquery, and it’s pretty hefty to load.
  • Bulma – a clean framework that’s developer-friendly and has no dependency on JavaScript.
  • Fundació – a more generic and usable CSS framework that has tons of components that are easily customizable. Additionally, there’s 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. In short, Tailwind ingeniously organized the class names using natural language to do what they say they do. So, while Tailwind doesn’t have a library of components, the ability to easily build a powerful, responsive interface just by referencing CSS class names is elegant, fast, and 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 for VS Code so that you can easily identify and insert classes from Microsoft’s code editor.

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.

Què et sembla?

Aquest lloc utilitza Akismet per reduir el correu no desitjat. Esbrineu com es processa el vostre comentari.