Tailwind CSS est un framework CSS dit utilitaire (utility-first). En effet il se distingue des autres frameworks CSS qui eux ont plutôt une approche sémantique dans le nom des classes prédéfinies.

Le principe de cette approche est le suivant : à défaut d’utiliser une classe sémantique pour chaque composant d’interface, Tailwind CSS va fournir aux développeurs un ensemble de classes utilitaires. Ces classes utilitaires peuvent ensuite être combinées entre elles, afin de former des composants plus complexes.

Dans l’exemple ci-dessous, le paragraphe est justifié, le texte est en rouge foncé avec un fond rouge clair et possède une marge intérieure de 4px.

Ce paragraphe est composé de quatre classes définissant son apparence. A première vue, cela rend l’HTML verbeux mais les avantages de cette approche où une classe correspond à strictement une seule propriété CSS sont nombreux. Tout d’abord, nous avons un fichier .css qui ne grossit pas, de plus nous n’avons pas à inventer de nom de classe supplémentaire et enfin cela permet un développement rapide d’interfaces personnalisées.

Pour finir j’aimerais vous mettre en garde quant à l’utilisation d’un framework CSS quel qu’il soit. En effet, on peut vite y prendre goût et peu à peu oublier le langage CSS. C’est pourquoi l’utilisation d’un framework CSS ne remplace pas la pratique du langage CSS qui lui permet un contrôle total du développement front-end.