Chapitre 2 : CLI Installation

1. Pourquoi pas le CDN ?

Bien que Tailwind propose un CDN pour les tests, la puissance réelle de l'outil vient de son **compilateur**. En l'installant localement, vous bénéficiez de :

• Fichiers CSS extrêmement légers (seules les classes utilisées sont conservées)
• Personnalisation via tailwind.config.js
• Utilisation des directives comme @apply

Objectifs du chapitre

• Comprendre les concepts clés de Installation (CLI & PostCSS).
• Savoir appliquer ces concepts sur un cas concret.
• Éviter les erreurs fréquentes et adopter les bonnes pratiques.

2. Installation via Tailwind CLI

# 1. Installer tailwind
npm install -D tailwindcss
npx tailwindcss init

# 2. Configurer les chemins (tailwind.config.js)
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: { extend: {} },
  plugins: [],
}

# 3. Ajouter les directives dans votre CSS (src/input.css)
@tailwind base;
@tailwind components;
@tailwind utilities;

# 4. Lancer la compilation
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Exemple pratique

Essayez d'appliquer la notion vue ici dans un mini-exemple de votre projet personnel. Ensuite, comparez votre résultat avec les exercices associés pour valider votre compréhension.