TailwindCSS

TailwindCSS est un framework CSS utilitaire qui permet de construire rapidement des interfaces utilisateur personnalisées. Au lieu d’utiliser des classes CSS prédéfinies, Tailwind fournit des classes utilitaires de bas niveau que vous pouvez combiner pour créer n’importe quel design.

Installation

Pour installer TailwindCSS dans votre projet, exécutez :


npm install -D tailwindcss


pnpm add -D tailwindcss


yarn add --dev tailwindcss


bun add --dev tailwindcss


npx tailwindcss init

Configuration

Créez un fichier tailwind.config.js à la racine de votre projet :


module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Utilisation

Ajoutez les directives Tailwind dans votre fichier CSS principal :


@tailwind base;
@tailwind components;
@tailwind utilities;

Exemples d’utilisation

Mise en page basique


<div className="container mx-auto px-4">
  <div className="flex flex-col md:flex-row gap-4">
    <div className="w-full md:w-1/2 bg-gray-100 p-4 rounded-lg">
      <h2 className="text-xl font-bold mb-2">Section 1</h2>
      <p className="text-gray-700">Contenu de la section</p>
    </div>
    <div className="w-full md:w-1/2 bg-gray-100 p-4 rounded-lg">
      <h2 className="text-xl font-bold mb-2">Section 2</h2>
      <p className="text-gray-700">Contenu de la section</p>
    </div>
  </div>
</div>

Bouton personnalisé


<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Cliquez ici
</button>

Carte responsive


<div className="max-w-sm rounded overflow-hidden shadow-lg">
  <img className="w-full" src="/image.jpg" alt="Image" />
  <div className="px-6 py-4">
    <div className="font-bold text-xl mb-2">Titre de la carte</div>
    <p className="text-gray-700 text-base">
      Description de la carte avec du texte sur plusieurs lignes.
    </p>
  </div>
</div>

Bonnes pratiques

Organisation des classes : Gardez un ordre cohérent dans vos classes (layout → espacement → couleurs → etc.)


<div className="flex items-center p-4 bg-blue-500 text-white">
  Contenu
</div>

Extraction des composants : Pour les motifs répétitifs, créez des composants réutilisables


function Button({ children }) {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      {children}
    </button>
  );
}

Responsive Design : Utilisez les préfixes de breakpoints pour un design adaptatif


<div className="text-sm md:text-base lg:text-lg">
  Texte responsive
</div>