Intégrer TailwindCSS dans votre thème WordPress avec @wordpress/scripts

Si t’en as marre de te battre avec du CSS en dur ou des frameworks lourds, on va voir ensemble comment intégrer TailwindCSS dans un thème WordPress proprement, en mode dev sérieux.

L’idée, c’est d’utiliser @wordpress/scripts pour compiler notre CSS et kiffer un setup efficace, à jour et bien foutu.

Prêt ? Let’s go.

Étape 1 : on pose les bases du thème

Si t’as déjà un thème custom, t’es bon. Sinon, on le crée vite fait :

cd wp-content/themes
mkdir mon-theme-tailwind
cd mon-theme-tailwind
touch style.css index.php functions.php

Dans le fichier style.css, balance un header classique :

/*
Theme Name: Mon Thème Tailwind
Author: Toi
Version: 1.0.0
*/

Étape 2 : on ajoute Tailwind & @wordpress/scripts

Il te faut Node.js pour ça. Vérifie avec un simple node -v ou npm -v.

Si c’est OK, on initialise npm dans notre thème :

npm init -y

On installe les dépendances :

npm install @wordpress/scripts tailwindcss postcss autoprefixer --save-dev

Étape 3 : configuration de Tailwind & PostCSS

Dans le fichier tailwind.config.js, faut dire où Tailwind doit chercher ses classes :

module.exports = {
  content: [
    "./*.php",
    "./template-parts/**/*.php",
    "./src/**/*.{ts,js,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Ajoute aussi un fichier de configuration postcss.config.js :

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

Étape 4 : création du fichier TailwindCSS

On crée le dossier et le fichier CSS :

mkdir -p src/styles
touch src/styles/tailwind.css

Et dedans, on balance les bases de Tailwind :

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

Étape 5 : build avec @wordpress/scripts

Ajoute ça dans package.json pour compiler le CSS :

"scripts": {
  "build": "wp-scripts build src/styles/tailwind.css --output build/tailwind.css",
}

Lance la compilation une première fois :

npm run build

Ça va créer un fichier build/tailwind.css avec tout ce qu’il faut.

Étape 6 : charger les styles générés par Tailwind dans WordPress

Dans ton fichier functions.php, faut charger notre CSS côté front :

function selina_theme_enqueue_styles() {
    $assetsPath = get_template_directory_uri()  . '/build/tailwind.asset.php';
    $asset = file_exists($assetPath)
            ? require $assetPath
            : array(
                'dependencies' => [],
                'version'      => null,
            );
 
    wp_enqueue_style(
        'tailwindcss',
        get_template_directory_uri() . '/build/tailwind.css',
        $asset['dependencies'],
        $asset['version']
    );
}
add_action('wp_enqueue_scripts', 'selina_theme_enqueue_styles');

Étape 7 : charger les styles générés par Tailwind dans l'éditeur Gutenberg

On veut aussi que l’éditeur affiche notre CSS. Ajoute ça dans functions.php :

function selina_theme_editor_styles() {
    add_theme_support('editor-styles');
    add_editor_style('assets/tailwind.css');
}
add_action('after_setup_theme', 'selina_theme_editor_styles');

Étape 8 : testons tout ça !

Dans index.php, on met un peu de classes Tailwind pour voir si ça marche :

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body <?php body_class('bg-gray-100 text-gray-900'); ?>>
    <h1 class="text-4xl font-bold text-center my-10">Hello Tailwind + WordPress</h1>
    <?php wp_footer(); ?>
</body>
</html>

Étape 9 : automatiser tout ça coté dev

Ajoute dans ton package.jsonun nouveau script en dessous de build:

"scripts": {
  "build": "wp-scripts build assets/css/tailwind.css --output assets/build/tailwind.css",
  "dev": "wp-scripts start assets/css/tailwind.css --output assets/build/tailwind.css"
}

Plutôt que de relancer npm run build à chaque modif, maintenant lance :

npm run dev

Dès que tu ajoutes une classe Tailwind quelque part, ça recompile direct.

Ce qu’on viens de faire ensemble :

On a installé et configuré TailwindCSS dans un thème WordPress
On compile notre CSS avec @wordpress/scripts
On a ajouté Tailwind coté front ansi que dans l’éditeur Gutenberg
On a un build automatique pour ne plus s’embêter

Maintenant, t’es libre de styliser ton WordPress à ta sauce avec Tailwind, sans prise de tête.

Et ensuite ?

Tu peux toujours pousser le bouchon plus loin pour :

Créer des composants réutilisables avec Tailwind et WordPress
Jouer avec les variantes (hover, focus, sm, lg, etc.)
Ajouter un dark mode (dark: dans Tailwind)

Si t’as des questions ou que tu galère sur un truc, viens me pinger sur Discord.