Tailwind CSS : un framework CSS utilitaire et une API pour une conception rapide et réactive

Cadre CSS Tailwind

Bien que je sois profondément plongé dans la technologie au quotidien, je n'ai pas autant de temps que je le souhaiterais pour partager les intégrations complexes et l'automatisation que mon entreprise met en œuvre pour les clients. De plus, je n'ai pas beaucoup de temps de découverte. La plupart des technologies sur lesquelles j'écris sont des entreprises qui recherchent Martech Zone les couvrant, mais de temps en temps – en particulier via Twitter – je vois du buzz autour d'une nouvelle technologie que j'ai besoin de partager.

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.

Cadres CSS

Ces dernières années, les concepteurs ont fait un travail assez incroyable en publiant des collections de styles préparés et prêts à l'emploi. Ces feuilles de style CSS sont mieux connues sous le nom de frameworks CSS, essayant de s'adapter à tous les différents styles et capacités réactives afin que les développeurs puissent simplement référencer un framework plutôt que de créer un fichier CSS à partir de zéro. Certains cadres populaires sont :

  • 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.
  • Fonds de teint – a more generic and usable CSS framework that has tons of components that are easily customizable. Additionally, there’s Fondation pour le courrier électronique et Motion UI pour les animations.
  • Kit d'interface utilisateur – une combinaison de HTML, JavaScript et CSS pour développer votre front-end rapidement et facilement.

Cadre CSS Tailwind

Alors que d'autres frameworks font un excellent travail pour s'adapter aux éléments d'interface utilisateur populaires, Tailwind utilise une méthodologie connue sous le nom de CSS atomique. 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.

Voici de très bons exemples :

Grilles CSS

colonnes de grilles de début de colonne css

Dégradés CSS

dégradés css

CSS pour la prise en charge du mode sombre

css mode sombre

Tailwind a également un fantastique rallonge disponible for VS Code so that you can easily identify and insert classes from Microsoft’s code editor.

Encore plus ingénieux, Tailwind supprime automatiquement tous les CSS inutilisés lors de la création pour la production, ce qui signifie que votre bundle CSS final est le plus petit possible. En fait, la plupart des projets Tailwind envoient moins de 10 Ko de CSS au client.

Que pensez-vous?

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..