Module Tailwind.2 – Installation & config

Objectif

Maîtriser l'installation de Tailwind CSS : CLI, fichier de configuration, purge CSS pour configurer Tailwind correctement dans vos projets.

Théorie

Installation

Méthode 1 : CLI (recommandé)

Installation :

npm install -D tailwindcss
npx tailwindcss init

Fichiers générés :

• tailwind.config.js : Configuration
• CSS à créer manuellement

CSS d'entrée :

/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Compilation :

npx tailwindcss -i ./input.css -o ./output.css --watch

Méthode 2 : Via CDN (développement uniquement)

HTML :

<script src="https://cdn.tailwindcss.com"></script>

⚠️ Attention : CDN = développement uniquement, pas pour production.

Limitations :

• Pas de purge CSS
• Pas de personnalisation
• Bundle énorme

Méthode 3 : Intégration build tool

Vite :

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configuration automatique : Vite gère PostCSS.

Webpack :

npm install -D tailwindcss postcss-loader autoprefixer

Configuration :

// webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            }
        ]
    }
};

Configuration (tailwind.config.js)

Structure de base :

module.exports = {
    content: [
        "./src/**/*.{html,js}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Content (Purge)

Définir où chercher les classes :

content: [
    "./src/**/*.html",
    "./src/**/*.js",
    "./src/**/*.jsx",
    "./src/**/*.vue",
]

Important : Tailwind scanne ces fichiers pour trouver les classes utilisées.

Theme

Personnaliser le thème :

theme: {
    extend: {
        colors: {
            'brand': '#6366f1',
        },
        spacing: {
            '128': '32rem',
        },
        fontFamily: {
            'sans': ['Roboto', 'sans-serif'],
        }
    }
}

Override (remplacer) :

theme: {
    colors: {
        // Remplace toutes les couleurs
        'primary': '#custom',
    }
}

Extend (ajouter) :

theme: {
    extend: {
        colors: {
            // Ajoute sans remplacer
            'brand': '#custom',
        }
    }
}

Plugins

Installer un plugin :

npm install @tailwindcss/forms

Configuration :

plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
]

Purge CSS

Purge automatique : Tailwind supprime automatiquement les classes non utilisées en production.

Configuration :

content: [
    "./src/**/*.html",
    "./src/**/*.js",
]

Mode développement :

• Toutes les classes disponibles
• Pas de purge

Mode production :

• Seulement les classes utilisées
• CSS final très petit

Safelist (classes à garder) :

safelist: [
    'bg-red-500',
    'text-center',
    {
        pattern: /bg-(red|green|blue)-(100|500|900)/,
    }
]

PostCSS

postcss.config.js :

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    }
}

Autoprefixer : Ajoute automatiquement les préfixes navigateurs.

Structure recommandée

Projet :

projet/
├── src/
│   ├── input.css
│   ├── index.html
│   └── js/
├── dist/
│   ├── output.css
│   └── index.html
├── tailwind.config.js
└── package.json

input.css :

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

/* CSS personnalisé si nécessaire */
@layer components {
    .btn-primary {
        @apply px-4 py-2 bg-blue-500 text-white rounded;
    }
}

npm scripts

package.json :

{
    "scripts": {
        "dev": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
        "build": "tailwindcss -i ./src/input.css -o ./dist/output.css --minify"
    }
}

Utilisation :

npm run dev    # Watch mode
npm run build  # Build production

Exercices guidés

Exercice 1 : Installation CLI

Installez Tailwind :

• npm install -D tailwindcss
• npx tailwindcss init
• Créez input.css
• Compilez et testez

Exercice 2 : Configuration

Configurez tailwind.config.js :

• Content paths
• Theme extend (couleurs, espacements)
• Testez la compilation

Exercice 3 : Purge CSS

Testez le purge :

• Mode dev (toutes les classes)
• Mode production (seulement utilisées)
• Comparez la taille

Exercice 4 : Intégration build tool

Intégrez avec Vite ou Webpack :

• Configuration PostCSS
• Watch mode
• Build production

Exercice 5 : Plugins

Installez un plugin :

• @tailwindcss/forms
• Configurez dans tailwind.config.js
• Testez les classes

❌ Erreurs fréquentes

Erreur 1 : Content mal configuré

❌ Mauvais :

content: [], // Vide = purge tout

✅ Bon :

content: [
    "./src/**/*.html",
    "./src/**/*.js",
]

Pourquoi : Content = où chercher les classes.

Erreur 2 : CDN en production

❌ Mauvais :

<!-- CDN en production -->
<script src="https://cdn.tailwindcss.com"></script>

✅ Bon :

<!-- CSS compilé -->
<link href="output.css" rel="stylesheet">

Pourquoi : CDN = pas de purge, bundle énorme.

Erreur 3 : Oublier @tailwind directives

❌ Mauvais :

/* Pas de @tailwind */
.custom { }

✅ Bon :

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

Pourquoi : Directives = injection de Tailwind.

Erreur 4 : Purge trop agressif

❌ Mauvais :

content: ['./index.html'], // Manque des fichiers

✅ Bon :

content: ['./src/**/*.{html,js,jsx,vue}'],

Pourquoi : Classes manquantes = styles absents.

Erreur 5 : Configuration après utilisation

❌ Mauvais :

// Utiliser bg-brand avant de le définir

✅ Bon :

// Définir dans theme.extend avant utilisation

Pourquoi : Configuration doit précéder l'utilisation.

🚀 Mini-projet

Mission : Configurer Tailwind dans un projet

Créez un projet avec Tailwind configuré :

Configuration :

• Installation complète
• tailwind.config.js configuré
• Content paths corrects
• Theme personnalisé (couleurs, espacements)

Build :

• Scripts npm (dev, build)
• Watch mode fonctionnel
• Purge CSS activé

Critères :

• ✅ Installation correcte
• ✅ Configuration complète
• ✅ Purge CSS fonctionnel
• ✅ Build scripts organisés
• ✅ Prêt pour développement

Objectif : Maîtriser l'installation et la configuration Tailwind pour créer un environnement de développement fonctionnel.

---

Validation : Vous pouvez passer au module suivant quand vous avez installé Tailwind, configuré tailwind.config.js, et pouvez compiler du CSS Tailwind.