2e étageTW Tailwind CSSPièce 6/6Mémo

Tailwind CSS

Le mémo de Tailwind CSS 4 : installation, classes courantes, variantes, thème avec @theme et détection des classes.

Ce mémo résume les classes et directives de Tailwind CSS 4. Chaque section renvoie au chapitre qui l'explique en détail.

Installation

npm install tailwindcss @tailwindcss/vite

vite.config.ts

import tailwindcss from '@tailwindcss/vite'

export default defineConfig({ plugins: [tailwindcss()] })

main.css

@import "tailwindcss";

Dans Nuxt, le plugin va dans vite: { plugins: [tailwindcss()] } et le CSS dans css: ['~/assets/css/main.css']. Avec Nuxt UI : module @nuxt/ui, @import "@nuxt/ui"; et <UApp>. Détails : Principe et installation.

Espacements, couleurs, texte

Classe	Effet
`p-4` `px-4` `pt-2`	Remplissage (4 = 1 rem)
`m-4` `mx-auto` `mt-6`	Marge
`gap-4`	Espace entre enfants
`bg-orange-50` `text-gray-600` `border-orange-300`	Couleurs, nuances de 50 à 950
`bg-orange-500/50`	Couleur à 50 % d'opacité
`text-sm` `text-xl` `font-bold` `leading-7`	Texte
`rounded-lg` `shadow-md` `border`	Coins, ombre, bordure
`p-[5px]`	Valeur arbitraire

Détails : Espacements, couleurs et typographie.

Flex et grid

Classe	Effet
`flex` `flex-col` `flex-wrap`	Conteneur flex, direction, retour à la ligne
`items-center`	Alignement sur l'axe secondaire
`justify-between` `justify-center`	Répartition sur l'axe principal
`flex-1`	Prend la place restante
`grid grid-cols-3`	Grille de 3 colonnes égales
`col-span-2`	Case sur 2 colonnes

Détails : Mise en page avec flex et grid.

Variantes et responsive

<button class="bg-orange-500 hover:bg-orange-600 md:px-8 dark:bg-orange-700">
  Voir la recette
</button>

Préfixe	Condition
`hover:` `focus:` `active:` `disabled:`	État de l'élément
`group-hover:`	Le parent `group` est survolé
`sm:` `md:` `lg:` `xl:` `2xl:`	À partir de 640, 768, 1024, 1280, 1536 px
`max-md:`	En dessous de 768 px
`dark:`	Mode sombre

Détails : Variantes d'état et responsive.

Thème

@import "tailwindcss";

@theme {
  --color-tomate-500: #d6402b;
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 120rem;
}

@custom-variant dark (&:where(.dark, .dark *));

--color-*: initial; retire les couleurs par défaut.
@theme inline fait utiliser la valeur directement.

Détails : Personnaliser le thème avec @theme.

Détection des classes

Directive	Rôle
`@source "../dossier";`	Analyser un dossier en plus
`@source not "../dossier";`	Exclure un dossier
`@source inline("underline");`	Forcer la génération d'une classe
`@import "tailwindcss" source(none);`	Désactiver la détection automatique

Écris toujours les classes en entier : text-red-600, jamais text-${couleur}-600. Pour réutiliser un bloc, préfère un composant à @apply. Détails : Bonnes pratiques.

Sources officielles

Documentation de Tailwind CSS (en anglais)

Ensuite

Principe et installation

Comprendre les classes utilitaires de Tailwind CSS 4, puis l'installer avec Vite ou dans un projet Nuxt.

Projet: Lignes de code
Niveau: 2e étage
Appartement: Tailwind CSS
Pièce: 6/6
Plan n°: tailwind/index