npx tailwindcss init -p : Comment Initialiser Tailwind avec PostCSS ?

La commande npx tailwindcss init -p vous renvoie une erreur « command not found » ?

Pas de panique, c’est un bug connu et simple à corriger. Ce guide vous donne la solution directe et la bonne méthode d’installation.

Résoudre l’erreur « command not found » avec npx tailwindcss init

Vous lancez la commande et votre terminal affiche un message d’erreur. Ça ressemble souvent à ça : `npx: installed 1 in 1.103s command not found: tailwindcss`. Ou parfois à `npm error could not determine executable to run`.

Ce n’est pas votre faute. Le problème vient d’une modification dans Tailwind CSS depuis la version 4. Le paquet que vous installez via npm n’inclut plus l’outil en ligne de commande (le CLI). Du coup, `npx` ne trouve rien à exécuter et plante.

La solution la plus simple et rapide est de forcer l’installation de Tailwind CSS en version 3. Cette version contient tout ce qu’il faut pour que la commande `npx tailwindcss init` fonctionne sans problème.

Pour faire ça, ouvrez votre terminal et copiez-collez les commandes suivantes. Elles sont conçues pour Windows. Si vous êtes sur Mac ou Linux, remplacez les deux premières lignes par `rm -rf node_modules package-lock.json`.

# Étape 1 : Nettoyer le projet (pour Windows)
rd /s /q node_modules
del package-lock.json

# Étape 2 : Installer la version 3 de Tailwind CSS avec PostCSS et Autoprefixer
npm install -D tailwindcss@3 postcss autoprefixer

# Étape 3 : Lancer l'initialisation (qui fonctionnera maintenant)
npx tailwindcss init -p

Après avoir exécuté ces commandes, vous devriez voir un message de succès. Deux nouveaux fichiers, `tailwind.config.js` et `postcss.config.js`, ont été créés à la racine de votre projet. Le problème est résolu. Vous pouvez passer à la configuration.

Guide complet pour initialiser Tailwind CSS avec PostCSS

Maintenant que l’erreur est corrigée (ou si vous partez de zéro avec la bonne méthode), voici le guide complet pour installer et configurer Tailwind CSS via npm. C’est un processus en 6 étapes simples.

Étape 1 : Installer les dépendances via npm

La première étape est d’installer les paquets nécessaires. On a besoin de trois choses : `tailwindcss` (en version 3), `postcss`, et `autoprefixer`. Ces outils travaillent ensemble pour transformer votre CSS.

Lancez cette commande dans votre terminal :

npm install -D tailwindcss@3 postcss autoprefixer

L’option -D les sauvegarde comme dépendances de développement, ce qui est la bonne pratique pour des outils de build.

Étape 2 : Créer les fichiers de configuration

C’est ici que la commande npx tailwindcss init -p entre en jeu. Elle va automatiquement créer deux fichiers de configuration essentiels :

• tailwind.config.js : Pour configurer Tailwind (couleurs, polices, etc.).
• postcss.config.js : Pour configurer PostCSS.

Exécutez la commande suivante :

npx tailwindcss init -p

Une fois terminée, vous verrez ces deux fichiers apparaître dans votre projet.

Étape 3 : Configurer les chemins des templates

Vous devez maintenant dire à Tailwind où se trouvent vos fichiers HTML et JavaScript. Il va les scanner pour trouver les classes que vous utilisez et générer uniquement le CSS nécessaire. C’est une optimisation importante.

Ouvrez le fichier tailwind.config.js et modifiez la ligne `content` pour qu’elle pointe vers votre dossier `src`.

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Ce chemin `./src/**/*.{html,js}` signifie « regarde tous les fichiers qui se terminent par .html ou .js dans le dossier src et ses sous-dossiers ».

Étape 4 : Ajouter les directives Tailwind à votre CSS

Tailwind a besoin d’un fichier CSS source où injecter ses styles. Créez un dossier `src` s’il n’existe pas, et à l’intérieur, un fichier nommé `input.css`.

Dans ce fichier, ajoutez les trois directives de base de Tailwind :

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

• @tailwind base injecte les styles de base (reset CSS).
• @tailwind components injecte les classes de composants.
• @tailwind utilities injecte toutes les classes utilitaires (comme `text-center`, `p-4`, etc.).

Étape 5 : Lancer le processus de build

Maintenant, il faut lancer la commande qui va prendre votre `input.css`, le traiter avec Tailwind, et générer un fichier CSS final, `output.css`.

Utilisez cette commande dans votre terminal :

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

L’option `–watch` est très pratique. Elle garde le processus actif et recompile automatiquement votre CSS dès que vous modifiez un de vos fichiers HTML, JS ou le fichier `input.css`.

Étape 6 : Utiliser Tailwind dans votre HTML

La dernière étape est de lier le fichier CSS généré à votre page HTML. Créez un fichier `index.html` dans votre dossier `src`.

Assurez-vous que la balise `` pointe bien vers le fichier `output.css` (ou le chemin où vous l’avez généré).

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline text-center text-blue-500">
    Hello world!
  </h1>
</body>
</html>

Ouvrez ce fichier dans votre navigateur. Si vous voyez « Hello world! » centré, en gras, souligné et en bleu, c’est que l’installation de Tailwind a fonctionné.

À quoi sert l’option -p ?

Vous vous demandez peut-être ce que fait exactement l’option `-p` dans la commande `npx tailwindcss init -p`.

Ce fichier est nécessaire pour que Tailwind fonctionne avec PostCSS. PostCSS est un outil qui transforme le CSS avec des plugins. Tailwind utilise des plugins PostCSS comme `autoprefixer`, qui ajoute automatiquement les préfixes vendeurs (comme `-webkit-` ou `-moz-`) pour assurer la compatibilité avec tous les navigateurs.

En bref, utiliser `-p` vous fait gagner une étape de configuration et prépare votre projet à fonctionner correctement.

Et si vous devez utiliser Tailwind CSS v4+ ?

La méthode décrite dans cet article est la plus simple si vous gérez votre projet avec npm. Mais que faire si vous devez absolument utiliser Tailwind CSS v4 ou une version plus récente ?

Comme le paquet npm ne contient plus le CLI, la commande `npx tailwindcss init` ne fonctionnera pas. Vous avez deux solutions :

• Utiliser le standalone CLI. C’est un fichier exécutable unique que vous téléchargez directement depuis le site de Tailwind. Il contient tout ce qu’il faut et fonctionne sans Node.js ou npm.
• Intégrer Tailwind dans un outil de build. Si votre projet utilise déjà un outil comme Vite, Webpack ou Parcel, vous pouvez suivre les guides d’installation spécifiques à ces plateformes. Ils gèrent la configuration de PostCSS pour vous.

Pour un projet simple, rester sur la version 3 via npm reste souvent la voie la plus directe.