Combien de lignes de code CSS avez-vous écrites dans votre dernier projet web ? Si vous répondez, beaucoup ou même presque. Alors vous êtes au bon endroit. Dans cet article, nous allons nous pencher sur le Tailwind CSS. Par lequel vous pouvez réduire vos lignes de CSS de 90%. Oui, vous avez bien lu. J'utilise le Tailwind CSS depuis un moment maintenant et je n'ai pas écrit une seule ligne de CSS.

Qu'est-ce que le Tailwind CSS ?

En bref, Tailwind est un framework CSS, mais il est différent de ceux de Bootstrap et Foundation. Il ne fournit que les bases brutes de ce dont vous avez besoin pour styliser vos propres pages web, comme les marges, les tailles, le positionnement, les couleurs, ce genre de choses. Vous ne trouverez pas de composants standard tels que des boutons et des barres de navigation - c'est à vous d'utiliser Tailwind pour construire vos propres composants. Cela donne une immense liberté là où de nombreux frameworks modernes ne restreignent que ce que vous construisez ; il n'est pas nécessaire de passer outre à quoi que ce soit !

Pourquoi utiliser un framework "Utility-first" ?

Un framework CSS de bas niveau, axé sur l'utilité, comme Tailwind, présente de nombreux avantages. Examinons les plus importants d'entre eux :

• Vous avez un meilleur contrôle sur l'apparence des éléments. Nous pouvons modifier et affiner l'apparence d'un élément beaucoup plus facilement grâce aux classes d'utilité.
• Il est facile à gérer et à maintenir dans les grands projets, car vous ne maintenez que des fichiers HTML, au lieu d'une grande base de code CSS.
• Il est plus facile de créer des sites web uniques et personnalisés sans avoir à se battre avec des styles indésirables.
• Il est hautement personnalisable et extensible, ce qui nous donne une flexibilité illimitée.
• L'approche est centrée sur la mobilité et la mise en œuvre de modèles de conception adaptés est facile.
• Il est possible d'extraire des modèles communs et répétitifs dans des composants personnalisés et réutilisables - dans la plupart des cas, sans avoir à écrire une seule ligne de CSS personnalisé.
• Il comporte des classes qui s'expliquent d'elles-mêmes. On peut imaginer à quoi ressemble l'élément stylisé uniquement en lisant les classes.
   

Avantages du Tailwind CSS

Personnalisation

Tailwind a été construit à partir de zéro pour être super personnalisable. Il est livré avec une configuration par défaut, mais il est facile de remplacer cette configuration par un fichier tailwind.config.js dans votre projet. Tout, des couleurs aux tailles d'espacement et aux polices, peut être personnalisé très facilement en utilisant le fichier config. Plus besoin de se battre contre le cadre de travail, de chercher à savoir quelles classes remplacer pour obtenir les résultats souhaités.

Rapidité de développement

Parce que vous n'avez pas besoin de nommer les choses, vous n'avez pas besoin de changer de contexte autant, et vous ne luttez pas contre le framework pour faire des personnalisations, le prototypage et la mise en œuvre de conceptions personnalisées est vraiment rapide en utilisant Tailwind. Beaucoup plus rapide qu'avec la plupart des autres frameworks CSS et certainement plus rapide que l'écriture de CSS personnalisés. Tailwind fournit presque tous les outils dont vous avez besoin pour construire un site, vous avez donc rarement besoin d'écrire des CSS personnalisés. Si vous préférez avoir des composants comme .btn et .panel, il est très facile de les créer vous-même pour les utiliser tout au long de votre projet.

Responsive partout

Tous les utilitaires de Tailwind sont générés avec des versions responsives que vous pouvez utiliser pour donner à votre site un aspect différent sur les écrans de téléphones portables, de tablettes et de bureaux. De plus, il propose les directives @screen et @responsive pour aider à générer des classes personnalisées qui sont responsives.

Pas de changement de contexte

L'une des raisons pour lesquelles Tailwind est beaucoup plus rapide à utiliser est que vous n'avez presque jamais à changer de contexte. Comme le framework fournit presque tout ce dont vous avez besoin, vous quittez rarement votre HTML (ou autre langage de template) lorsque vous créez un design. Plus besoin de passer du HTML au CSS des centaines de fois pour obtenir un design à l'aspect parfait.

Système de design intégré

Un autre avantage du fichier de configuration est qu'il vous donne un système de design à partir duquel vous pouvez travailler. Dans la plupart des cas, les designs ont une meilleure apparence si vous utilisez un espacement, des tailles, des couleurs, etc. cohérents. Comme Tailwind vous permet de configurer toutes ces valeurs à l'avance (ou fournit des valeurs par défaut saines), tant que vous vous en tenez à l'utilisation de vos classes Tailwind, vous avez un assez bon départ sur un système de design.