Tailwind CSS permet de styler des pages HTML directement dans le markup en utilisant des classes CSS prédéfinies.

Pour styler un élément, on lui ajoute un attribut class avec une suite de utility classes qui réalisent l’effet voulu.

• il fournit des classes dont les noms ont une syntaxe régulière, qui couvrent la plupart les besoins et qui facilitent le travail d’équipe
• il est facile à configurer
• il élimine le CSS inutile

Installation pour un projet Vite

Configurer tailwind.config.js :

Créer un fichier src/styles.css :

Créer un fichier index.html avec des classes Tailwind :

Au lieu d’ajouter /src/styles.css dans index.html, Vite permet aussi de l’importer en JS :

Test :

En permanence Tailwind scan les fichiers, génère le CSS associé et Vite les intégre dans la page affichée.

Build

Plugins

• tailwindcss-forms
• prelineui
• daisyui

Boutons

Alertes

Cards

Formulaires

Navigation

Responsivité

Pour la responsivité, on peut préfixer un attribut-valeur par sm:, md:, lg:, xl:, 2xl: pour appliquer l’effet seulement lorsque l’écran a au moins la largeur spécifiée.

Sticky navbar