Tailwind

Tailwind est un framework CSS utilitaire qui permet de créer des designs personnalisés rapidement et efficacement.

Le principe de Tailwind est de fournir une série de classes utilitaires qui peuvent être combinées pour construire des composants et des mises en page sans avoir à écrire de CSS personnalisé.

Comment ça fonctionne ?

Comme indiqué plus haut, Tailwind propose plusieurs classes utilitaires qu'on utilise directement dans le HTML. Par exemple, pour créer un bouton, on peut utiliser les classes suivantes :

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Bouton
</button>

Quels sont les avantages de Tailwind ?

Personnalisation : Tailwind permet de personnaliser facilement les styles en modifiant les classes utilitaires.
Productivité : Grâce à sa nature utilitaire, Tailwind permet de construire des interfaces rapidement sans avoir à écrire de CSS personnalisé.
Consistance : En utilisant des classes utilitaires, on s'assure que les styles sont cohérents à travers l'application.
Nommage : Pas besoin de nommer les classes CSS, ce qui réduit le risque de conflits de noms.
Optimisation : Tailwind inclut un outil de purge qui élimine les classes inutilisées dans la production, réduisant ainsi la taille du fichier CSS.

Compilation des styles

Comme indiqué dans la liste des avantages, à la génration du site, Tailwind va compiler les classes utilisées dans le projet pour générer un fichier CSS optimisé. Cela signifie que seules les classes réellement utilisées dans le projet seront incluses dans le fichier final, ce qui réduit la taille du fichier CSS.

Celà veut dire également que si vous ajoutez une nouvelle classe utilitaire dans votre HTML, vous devez à nouveau compiler les styles pour que cette classe soit prise en compte dans le fichier CSS final.

Pour celà vous devez vous rendre dans le dossier du projet et exécuter la commande suivante :

cd app/design/frontent/Vendor/theme/web/tailwind
npm run build-prod

Si vous voulez vous pouvez également exécuter la commande suivante pour compiler les styles en mode développement :

cd app/design/frontent/Vendor/theme/web/tailwind
npm run watch

A chaque modification de vos fichiers HTML, Tailwind va automatiquement recompiler les styles pour que vous puissiez voir les changements en temps réel.

Utilisation de classes css personnalisées

Si vous désirez quand même utiliser des classes CSS personnalisées, vous pouvez le faire en ajoutant vos styles dans le fichier app/design/frontent/Vendor/theme/web/tailwind/tailwind-source.css.

Et le responsive comment ça marche ?

Pour le responsive, Tailwind utilise des préfixes pour les classes utilitaires. Par exemple, pour appliquer une classe uniquement sur les écrans de taille moyenne et plus, on peut utiliser le préfixe md: :

<div class="bg-gray-200 md:bg-blue-500">
  Contenu
</div>

Documentation Hyva