Tailwind CSS : un framework CSS utilitaire et une API pour une conception rapide et réactive
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.
Si vous travaillez dans la conception de sites Web, le développement d'applications mobiles ou même si vous mettez simplement en place un système de gestion de contenu, vous avez probablement été confronté aux frustrations des styles concurrents sur plusieurs feuilles de style. Même avec les incroyables outils de développement intégrés à chaque navigateur, la recherche et le nettoyage des CSS peuvent nécessiter beaucoup trop de temps et d'énergie.
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 – un cadre qui a évolué sur une décennie, introduit pour la première fois par Twitter. Il offre d'innombrables fonctionnalités. Il a des inconvénients, nécessitant SASS, difficile à surcharger, dépendant de JQquery, et il est assez lourd à charger.
- Bulma – un framework propre qui est convivial pour les développeurs et ne dépend pas de JavaScript.
- Fondation – un framework CSS plus générique et utilisable qui contient des tonnes de composants facilement personnalisables. De plus, il y a 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. En bref, Tailwind a ingénieusement organisé les noms des classes en utilisant le langage naturel pour faire ce qu'ils disent faire. Ainsi, bien que Tailwind n'ait pas de bibliothèque de composants, la possibilité de créer facilement une interface puissante et réactive simplement en référençant les noms de classe CSS est élégante, rapide et incomparable.
Voici de très bons exemples :
Grilles CSS
Dégradés CSS
CSS pour la prise en charge du mode sombre
Tailwind a également un fantastique rallonge disponible pour VS Code afin que vous puissiez facilement identifier et insérer des classes à partir de l'éditeur de code de Microsoft.
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.