Tailwind CSS 39 termes

Directive CSS qui permet d'extraire des utilitaires Tailwind dans des classes CSS custom. Utile pour les composants reutilisables ou l'integration avec du CSS existant.

Creer un raccourci clavier qui execute plusieurs commandes d'un coup.

/* styles.css */
.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white
    rounded-lg hover:bg-blue-700
    transition-colors font-medium;
}

Cas d'usage : Extraire un composant reutilisable quand les classes sont trop longues dans le HTML.

Directive qui organise le CSS en couches (base, components, utilities). Permet de controler la specificite et l'ordre de vos styles custom.

Les etages d'un immeuble : base au sous-sol, composants au milieu, utilitaires au sommet (la plus haute priorite).

@layer base {
  h1 { @apply text-2xl font-bold; }
}
@layer components {
  .card { @apply p-4 rounded-lg shadow; }
}
@layer utilities {
  .text-shadow { text-shadow: 2px 2px 4px #0003; }
}

Cas d'usage : Organiser ses styles custom pour qu'ils s'integrent correctement dans le systeme de specificite Tailwind.

Plugin officiel qui ajoute la classe prose pour styler automatiquement du contenu riche (articles, markdown, CMS). Gere les titres, listes, code, citations.

Un styliste personnel pour tes articles : il rend tout beau sans que tu touches a chaque element.

<article class="prose prose-lg prose-blue
  dark:prose-invert max-w-none">
  <h1>Mon Article</h1>
  <p>Le contenu est automatiquement style...</p>
  <pre><code>const x = 1;</code></pre>
</article>

Cas d'usage : Styler du contenu editorial/markdown venant d'un CMS ou d'une base de donnees.

Classes animate-* pour les animations predefinies (spin, ping, pulse, bounce) et transition-* pour les transitions CSS avec duree et easing configurables.

animate c'est une choregraphie complete, transition c'est juste un fondu entre deux poses.

<div class="animate-spin h-8 w-8 border-4
  border-blue-500 rounded-full border-t-transparent">
</div>
<button class="transition-all duration-300 ease-in-out
  hover:scale-105 hover:shadow-lg">Bouton</button>

Cas d'usage : Ajouter du mouvement subtil aux interactions utilisateur (loading spinners, hover effects).

Syntaxe entre crochets permettant d'utiliser des valeurs custom non prevues dans le theme. Evite de modifier la config pour des cas ponctuels.

Un joker dans un jeu de cartes : tu l'utilises quand aucune carte standard ne convient.

<div class="top-[117px] w-[calc(100%-2rem)]
  bg-[#1da1f2] grid-cols-[1fr_2fr]
  text-[clamp(1rem,2vw,1.5rem)]">
</div>

Cas d'usage : Respecter une maquette pixel-perfect avec des valeurs specifiques sans polluer la config Tailwind.

Technique consistant a combiner plusieurs classes utilitaires pour creer un style complet. L'ordre des classes n'affecte pas la specificite.

Comme composer un plat en ajoutant des ingredients un par un : sel, poivre, huile, chacun apporte sa touche.

<button class="px-4 py-2 bg-blue-500 text-white
  rounded-lg hover:bg-blue-600 transition-colors">
  Cliquer
</button>

Cas d'usage : Construire des composants UI en empilant des utilitaires sans ecrire de CSS custom.

Utilitaires pour construire des chaines de classes conditionnelles. cn() combine clsx + twMerge pour gerer les conditions ET les conflits Tailwind.

Un assistant qui compose ta tenue selon la meteo : si pluie alors parapluie, si froid alors manteau.

import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

const cn = (...inputs) => twMerge(clsx(inputs))

cn('p-4 bg-blue-500', isActive && 'bg-green-500',
  { 'opacity-50': isDisabled })
// => 'p-4 bg-green-500' si isActive

Cas d'usage : Gerer proprement les classes conditionnelles dans les composants React avec Tailwind.

Strategie de factorisation des styles repetitifs en composants (React, Vue) ou en classes @apply. Le composant JS/TS est prefere a @apply.

Quand tu repetes la meme recette, tu l'ecris sur une fiche plutot que de la reciter a chaque fois.

// Prefere: composant React
const Button = ({ children }) => (
  <button className="px-4 py-2 bg-blue-500
    text-white rounded hover:bg-blue-600">
    {children}
  </button>
);

Cas d'usage : Eviter la duplication de longues chaines de classes dans les templates/JSX.

Classe qui fixe la largeur max d'un element selon le breakpoint actif. Peut etre centre automatiquement via la config.

Les bords d'une route : ils empechent le contenu de s'etaler a l'infini sur grands ecrans.

<div class="container mx-auto px-4">
  <!-- Contenu centre et contraint -->
</div>
// config: container: { center: true, padding: '1rem' }

Cas d'usage : Centrer le contenu principal et limiter sa largeur sur grands ecrans.

Queries basees sur la taille du conteneur parent (pas du viewport). Supportees en Tailwind via le plugin @tailwindcss/container-queries avec les prefixes @sm, @md, @lg.

Un meuble qui s'adapte a la taille de la piece ou il se trouve, pas a la taille de la maison.

<div class="@container">
  <div class="@sm:flex @lg:grid @lg:grid-cols-2">
    <!-- S'adapte a la taille du parent -->
  </div>
</div>

Cas d'usage : Creer des composants vraiment responsifs qui s'adaptent a leur conteneur, pas au viewport.

Configuration content qui indique a Tailwind ou scanner les classes utilisees. Essentiel pour le tree-shaking : seules les classes trouvees sont generees en prod.

Dire au facteur quelles boites aux lettres existent pour qu'il ne distribue pas de courrier fantome.

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './components/**/*.vue',
    './node_modules/flowbite/**/*.js'
  ]
}

Cas d'usage : Configurer correctement le scanning pour eviter que des classes soient manquantes en production.

API pour creer ses propres plugins Tailwind via addUtilities, addComponents, addVariant. Permet d'etendre le framework avec des fonctionnalites specifiques au projet.

Fabriquer tes propres briques LEGO quand les formes standard ne suffisent plus.

const plugin = require('tailwindcss/plugin')
module.exports = plugin(({ addVariant, e }) => {
  addVariant('hocus', ['&:hover', '&:focus'])
  // Usage: hocus:bg-blue-500
})

Cas d'usage : Ajouter des variantes custom (hocus, supports) ou des utilitaires metier au framework.

Plugin Tailwind qui ajoute des classes de composants semantiques (btn, card, modal). Fournit des themes pre-faits tout en restant personnalisable.

Un kit de meubles IKEA pre-assembles : prets a l'emploi mais tu peux les customiser.

<button class="btn btn-primary">Cliquer</button>
<div class="card bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">Titre</h2>
  </div>
</div>

Cas d'usage : Prototyper rapidement avec des composants pre-styles tout en gardant l'ecosysteme Tailwind.

Prefix dark: qui applique des styles quand le mode sombre est actif. Peut fonctionner via la media query prefers-color-scheme ou via une classe sur le HTML.

Un interrupteur jour/nuit dans ta maison : les meubles restent, seul l'eclairage change.

<div class="bg-white dark:bg-gray-900
  text-black dark:text-white">
  Mode clair et sombre automatique
</div>
// tailwind.config: darkMode: 'class'

Cas d'usage : Implementer un theme sombre sans dupliquer les composants ni gerer des variables CSS manuellement.

Ensemble de classes utilitaires pour controler les layouts flexbox : direction, alignement, justification, wrap et grow/shrink.

Un chef d'orchestre qui place les musiciens en ligne, les espace et les aligne comme il veut.

<div class="flex flex-col md:flex-row
  items-center justify-between gap-4
  flex-wrap">
  <div class="flex-1">A</div>
  <div class="flex-shrink-0">B</div>
</div>

Cas d'usage : Creer des layouts flexibles et responsifs (navbars, cards, formulaires) sans CSS custom.

Librairie de composants Tailwind avec du JavaScript interactif inclus. Disponible en version vanilla, React, Vue et Svelte.

Un catalogue de meubles avec la notice de montage et les outils fournis.

<div data-dial-init class="fixed end-6 bottom-6">
  <button data-dial-toggle="speed-dial"
    class="btn btn-primary rounded-full p-4">
    +
  </button>
</div>

Cas d'usage : Ajouter des composants interactifs (dropdowns, modals, carousels) dans un projet Tailwind.

Classes pour controler la police (font-sans/serif/mono), le poids (font-bold), la taille (text-sm/lg/xl) et le style (italic, antialiased).

Les reglages d'un traitement de texte : police, taille, gras, italique.

<h1 class="font-display text-4xl font-extrabold
  tracking-tight leading-tight">
  Titre Principal
</h1>
<p class="font-sans text-base font-normal
  text-gray-600 leading-relaxed">Contenu</p>

Cas d'usage : Appliquer une typographie coherente sur l'ensemble du projet via des classes utilitaires.

Classes pour creer des grilles CSS : nombre de colonnes, placement, gaps et zones. Simplifie les layouts complexes en quelques classes.

Un tableur Excel : tu definis colonnes et lignes, puis places tes contenus dans les cellules.

<div class="grid grid-cols-3 gap-6">
  <div class="col-span-2">Large</div>
  <div class="row-span-2">Haut</div>
  <div>Normal</div>
</div>

Cas d'usage : Construire des grilles de cards, galleries photo, ou dashboards avec un layout precis.

Modificateurs qui permettent de styler un enfant (group-hover:) ou un element frere (peer-checked:) en fonction de l'etat d'un autre element.

Quand papa sourit (group), les enfants changent de couleur. Quand ton voisin coche (peer), tu apparais.

<div class="group p-4 hover:bg-blue-50">
  <h3 class="group-hover:text-blue-600">Titre</h3>
</div>

<input type="checkbox" class="peer" />
<p class="hidden peer-checked:block">Visible si coche</p>

Cas d'usage : Creer des interactions parent-enfant ou frere-frere sans JavaScript.

Librairie de composants accessibles et sans style par defaut, concue par l'equipe Tailwind. Fournit la logique (modals, menus, tabs) sans imposer de design.

Un mannequin nu : il a la structure, tu choisis les vetements (les styles).

import { Menu } from '@headlessui/react'
<Menu>
  <Menu.Button className="px-4 py-2">Options</Menu.Button>
  <Menu.Items className="absolute mt-2 bg-white shadow-lg">
    <Menu.Item>{({ active }) =>
      <a className={active ? 'bg-blue-100' : ''}>Edit</a>
    }</Menu.Item>
  </Menu.Items>
</Menu>

Cas d'usage : Implementer des composants accessibles (ARIA) avec un style 100% custom en Tailwind.

Mode Just-In-Time qui genere les classes a la volee au lieu de tout pre-generer. Actif par defaut depuis Tailwind 3, il rend le build quasi instantane.

Un restaurant a la carte au lieu d'un buffet : on prepare uniquement ce que tu commandes.

// Avant JIT : build lourd de tout le CSS
// Avec JIT : seules les classes utilisees sont generees
// Active les valeurs arbitraires
<div class="top-[117px] grid-cols-[1fr_auto]">
</div>

Cas d'usage : Avoir un build rapide et un fichier CSS minimal meme avec des milliers de variantes possibles.

Configuration des keyframes CSS dans tailwind.config.js pour creer des animations custom utilisables via la classe animate-*.

Ecrire le script d'une scene de film, puis dire a l'acteur de la jouer avec animate-*.

// tailwind.config.js
theme: {
  extend: {
    keyframes: {
      fadeIn: {
        '0%': { opacity: '0' },
        '100%': { opacity: '1' }
      }
    },
    animation: { fadeIn: 'fadeIn 0.5s ease-in-out' }
  }
}

Cas d'usage : Creer des animations d'entree/sortie custom pour les modals, toasts, et notifications.

Classes p-* et m-* pour controler le padding et la marge. Variantes directionnelles (px, py, pt, pr, pb, pl) et valeurs negatives (-m-*).

Le padding c'est le rembourrage dans un colis, la marge c'est l'espace entre les colis sur l'etagere.

<div class="p-6 m-4">
  <div class="px-4 py-2 mt-2 -ml-1">
    Padding horizontal 1rem, vertical 0.5rem
  </div>
</div>

Cas d'usage : Controler l'espacement interne et externe de chaque element dans le layout.

Systeme d'extension qui permet d'ajouter de nouvelles utilitaires, composants ou variantes a Tailwind. Les plugins officiels incluent typography, forms, aspect-ratio.

Des extensions de navigateur : elles ajoutent des fonctionnalites sans modifier le coeur du logiciel.

// Plugin custom
const plugin = require('tailwindcss/plugin')
module.exports = plugin(({ addUtilities }) => {
  addUtilities({
    '.text-shadow': {
      textShadow: '2px 2px 4px rgba(0,0,0,0.1)'
    }
  })
})

Cas d'usage : Ajouter des utilitaires manquantes ou integrer un systeme de design custom dans Tailwind.

Option de config qui ajoute un prefixe a toutes les classes Tailwind generees. Evite les conflits avec du CSS existant ou d'autres frameworks.

Mettre une etiquette sur tes affaires a l'ecole pour ne pas les confondre avec celles des autres.

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
}
// Usage: <div class="tw-flex tw-p-4 tw-bg-blue-500">

Cas d'usage : Integrer Tailwind dans un projet existant avec du CSS legacy sans conflits de noms.

Mecanisme de tree-shaking qui elimine les classes CSS non utilisees du build final. Renomme de purge a content dans Tailwind 3.

Le tri dans un dressing : tu gardes ce que tu portes, tu jettes le reste.

// Tailwind 2 (ancien)
purge: ['./src/**/*.html']

// Tailwind 3+ (actuel)
content: ['./src/**/*.{js,tsx,html}']

Cas d'usage : Reduire le CSS final de plusieurs Mo a quelques Ko en production.

Strategie mobile-first ou les styles de base ciblent le mobile, et les prefixes de breakpoint ajoutent des styles pour les ecrans plus larges.

Construire un batiment du rez-de-chaussee vers le haut : chaque etage ajoute de l'espace.

<!-- Mobile: stack, Tablet: 2 cols, Desktop: 3 cols -->
<div class="flex flex-col sm:flex-row sm:flex-wrap">
  <div class="w-full sm:w-1/2 lg:w-1/3 p-2">
    Card
  </div>
</div>

Cas d'usage : Adapter automatiquement le layout a toutes les tailles d'ecran sans media queries manuelles.

Prefixes (sm, md, lg, xl, 2xl) qui appliquent une classe uniquement a partir d'un breakpoint donne. L'approche est mobile-first par defaut.

Des vetements adaptatifs : un manteau que tu enfiles seulement quand il fait froid (a partir d'une certaine temperature).

<div class="grid grid-cols-1 sm:grid-cols-2
  md:grid-cols-3 lg:grid-cols-4">
  <!-- Responsive grid -->
</div>

Cas d'usage : Creer des layouts responsifs sans media queries manuelles, directement dans le markup.

Liste de classes a toujours inclure dans le build, meme si elles ne sont pas detectees dans le code source. Utile pour les classes generees dynamiquement.

Une liste VIP : ces invites entrent toujours, peu importe s'ils sont sur la liste principale.

// tailwind.config.js
module.exports = {
  safelist: [
    'bg-red-500',
    'bg-green-500',
    { pattern: /bg-(red|green|blue)-(100|500)/ }
  ]
}

Cas d'usage : Garantir que des classes construites dynamiquement (bg-${color}-500) sont presentes en production.

Collection de composants React copies dans le projet (pas un npm package). Base sur Radix UI + Tailwind, entierement personnalisable car le code est dans ton repo.

Un livre de recettes ou tu photographies chaque recette : tu peux modifier les ingredients a volonte.

// npx shadcn-ui@latest add button
import { Button } from '@/components/ui/button'

<Button variant="destructive" size="lg">
  Supprimer
</Button>

Cas d'usage : Bootstrapper une UI React avec des composants accessibles et personnalisables sans dependance npm lourde.

Utilitaires space-x et space-y qui ajoutent un espacement entre les enfants d'un conteneur via des marges automatiques. Alternative a gap pour les anciens navigateurs.

Des separateurs automatiques entre les livres sur une etagere.

<div class="space-y-4">
  <p>Premier</p>
  <p>Deuxieme (margin-top: 1rem auto)</p>
  <p>Troisieme</p>
</div>

Cas d'usage : Espacer uniformement les enfants d'une liste verticale ou horizontale.

Prefixes conditionnels (hover:, focus:, active:, disabled:, etc.) qui appliquent un style uniquement dans un etat specifique de l'element.

Comme un cameleon qui change de couleur selon la situation : touche, survole, presse.

<button class="bg-blue-500 hover:bg-blue-700
  focus:ring-2 focus:ring-blue-300
  active:scale-95 disabled:opacity-50">
  Action
</button>

Cas d'usage : Gerer les interactions utilisateur (survol, focus, clic) sans ecrire de pseudo-selectors CSS.

Librairie qui fusionne intelligemment les classes Tailwind en resolvant les conflits. p-4 + p-2 donne p-2 au lieu de garder les deux.

Un arbitre qui tranche quand deux regles se contredisent : la derniere gagne proprement.

import { twMerge } from 'tailwind-merge'

twMerge('px-4 py-2 bg-blue-500', 'px-6 bg-red-500')
// => 'py-2 px-6 bg-red-500'

Cas d'usage : Permettre l'override propre de styles dans des composants qui acceptent className en prop.

Plugin communautaire ajoutant des classes d'animation avancees a Tailwind (motion-safe, motion-reduce, et des presets d'animation plus riches).

Un pack d'effets speciaux pour tes films : fondu, zoom, rotation, tout pret a l'emploi.

<div class="motion-safe:animate-fadeIn
  motion-reduce:animate-none">
  Respecte les preferences d'accessibilite
</div>

Cas d'usage : Ajouter des animations respectant prefers-reduced-motion sans code CSS custom.

Fichier de configuration central de Tailwind. Definit le theme (couleurs, tailles), les content paths, les plugins et les personnalisations du framework.

Le tableau de bord de ta voiture : tu regles tout depuis un seul endroit.

module.exports = {
  content: ['./src/**/*.{js,tsx}'],
  theme: {
    extend: {
      colors: { brand: '#FF6B35' },
    },
  },
  plugins: [require('@tailwindcss/typography')],
}

Cas d'usage : Personnaliser les couleurs, fonts et breakpoints du projet pour matcher la charte graphique.

Classes pour controler l'alignement (text-center), la couleur (text-gray-600), la decoration (underline), le truncate et le line-clamp du texte.

Les outils de mise en forme dans un editeur : aligner, colorer, souligner, couper.

<p class="text-center text-gray-600 uppercase
  tracking-wide truncate">
  Texte tronque si trop long...
</p>
<p class="line-clamp-3">Limite a 3 lignes...</p>

Cas d'usage : Formater le texte (alignement, couleur, coupure) directement dans le markup.

Section extend dans la config qui ajoute de nouvelles valeurs au theme sans ecraser les valeurs par defaut de Tailwind.

Ajouter des pages a un dictionnaire sans arracher les existantes.

// tailwind.config.js
theme: {
  extend: {
    spacing: { '128': '32rem' },
    colors: { primary: { 500: '#6366f1' } },
    fontFamily: { display: ['Inter', 'sans-serif'] },
  }
}

Cas d'usage : Ajouter des couleurs de marque, des tailles custom tout en conservant les utilitaires existants.

Approche ou le style est applique via des classes utilitaires atomiques directement dans le HTML. Chaque classe fait une seule chose (couleur, marge, taille).

Des briques LEGO : chaque piece a une fonction unique, et tu construis ce que tu veux en les combinant.

<div class="flex items-center gap-4 p-6 bg-white rounded-lg shadow-md">
  <h2 class="text-xl font-bold text-gray-900">Titre</h2>
</div>

Cas d'usage : Prototyper rapidement des interfaces sans quitter le HTML ni gerer de fichiers CSS separes.

Classes w-* et h-* pour definir la largeur et hauteur. Inclut les valeurs fractionnelles (w-1/2), min/max (min-w-0, max-h-screen) et speciales (w-full, h-screen, h-dvh).

Comme regler la taille d'une fenetre : largeur, hauteur, et des limites min/max.

<div class="w-full max-w-lg mx-auto h-screen">
  <img class="w-1/2 h-auto" />
  <div class="min-h-[50vh] size-16"></div>
</div>

Cas d'usage : Dimensionner des elements de facon responsive avec des contraintes min/max.