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

Bien que je sois quotidiennement plongé dans la technologie, je n'ai pas autant de temps que je le voudrais pour partager les intégrations et l'automatisation complexes 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 pour les couvrir, mais de temps en temps – en particulier via Twitter – je vois un certain buzz autour d'une nouvelle technologie que je dois partager.

Si vous travaillez dans le Web. conception, développement d'applications mobiles ou même simplement mettre en place un système de gestion de contenu, vous avez probablement lutté contre les frustrations des styles concurrents sur plusieurs feuilles de style. Même avec les outils de développement incroyables intégrés à chaque navigateur, la recherche et le nettoyage des CSS peuvent nécessiter beaucoup trop de temps et d'énergie. qui sont 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 frameworks populaires sont :

• Bootstrap – un framework 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.
• Foundation – un framework CSS plus générique et utilisable qui contient des tonnes de composants facilement personnalisables. De plus, il existe Foundation for Email et Motion UI pour les animations.
• UI Kit – une combinaison de HTML, JavaScript et CSS pour développer votre front-end rapidement et facilement.

Tailwind CSS Framework

Alors que d'autres frameworks font un excellent travail pour s'adapter à l'interface utilisateur populaire éléments, Tailwind utilise une méthodologie connue sous le nom de Atomic CSS. 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 des noms de classes CSS est élégante, rapide et incomparable.

Voici quelques très bons exemples :

CSS Grids

CSS Gradients

CSS pour la prise en charge du mode sombre

Tailwind dispose également d'une fantastique extension 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 lorsque bâtiment pour la production, ce qui signifie que votre paquet CSS final est le plus petit possible. En fait, la plupart des projets Tailwind envoient moins de 10 ko de CSS au client.