Tailwind CSS est un framework CSS qui va vous permettre d’accélérer énormément votre flux de travail.

Tailwind CSS fonctionne sur le principe de classes multiples à l’instar de Bootstrap, pour ne citer que lui. Mais avec un avantage certain, il est totalement personnalisable.

<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>

Tailwind CSS est, bien sûr, livré avec une configuration par défaut, mais il est très facile de remplacer cette configuration par défaut à l’aide d’un fichier externe.

De plus, même la configuration par défaut vous permet de personnaliser votre design, car il ne s’agit pas de blocs complets comme des boutons, des cartes, des formulaires, mais des attributs de ces blocs.

Et vos propres blocs deviennent entièrement personnalisables: des couleurs aux tailles en passant par les colonnes, les polices ou les espacements.

Plus besoin de lutter contre le framework, d'essayer de déterminer les classes à remplacer pour obtenir les résultats souhaités.

Vous pouvez donc avoir un design original, qui ne ressemble à aucun autre sans écrire une seule ligne de css.

Si vous avez du mal à nommer ou hiérarchiser vos classes, Tailwind CSS résout ces problèmes à votre place, en fournissant des classes utilitaires qui se gèrent seules.

<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">

Il gère également le responsive via des préfixes de classes qui correspondent à des largeurs prédéfinie de breakpoints.

'sm': {'min': '640px', 'max': '767px'},
<div class="text-gray-700 sm:text-black">

L'une des raisons pour lesquelles Tailwind CSS est tellement plus rapide à utiliser est que vous n'avez presque jamais à changer de contexte. Étant donné que le framework fournit presque tout ce dont vous avez besoin, vous délaissez rarement votre code HTML (ou autre langage) lors de la construction d'un design. Plus besoin de passer du HTML au CSS des centaines de fois pour obtenir un design parfaitement adapté.

Comme Tailwind CSS fournit les noms et l'organisation des classes, vous passerez d’un projet à l’autre en restant cohérent dans le fonctionnement. Donc, si un développeur est familier avec Tailwind CSS, il pourra se lancer dans un nouveau projet Tailwind CSS sans problèmes.

Si vous préférez avoir des composants personnalisés comme .btn, .container ou .field, vous pourrez aisément les créer vous-même pour les utiliser tout au long de votre projet.

Généralement, lorsque votre projet se développe, votre fichier CSS grossit conjointement. Ce n'est pas le cas lors de l'utilisation de Tailwind CSS.
Étant donné que vous utilisez un ensemble standard de classes, votre fichier CSS restera de taille identique tout au long de la vie du projet.

Lorsque vous travaillez de façon traditionnelle en CSS, si vous apportez des modifications au design d'une page, les nouvelles classes peuvent affecter d’autres pages sans que vous le sachiez. En utilisant Tailwind CSS, toutes les modifications que vous apportez seront uniquement sur votre html, ce qui n'affectera que la page sur laquelle vous travaillez. Cela rend beaucoup plus facile la modification des pages sans vous soucier des effets secondaires que vous pourriez provoquer.

Même si vous n’aimez pas les frameworks, vous devriez tester Tailwind CSS, ou à tout le moins regarder les vidéos d’explication sur le site.