Intégrer Vite et Tailwind CSS pour créer un thème WordPress moderne en 2025

  • WordPress
  • Vite
  • Tailwind CSS
—3 minutes de lecture

Malgré l’émergence de nouveaux frameworks, WordPress reste aujourd’hui l’un des CMS les plus utilisés. Sa flexibilité et son écosystème en font un outil incontournable. Pour en tirer pleinement parti, il est essentiel de le maîtriser et de savoir développer un thème personnalisé, capable de répondre aux spécificités de chaque projet. Fini les configurations Gulp ou Webpack lourdes et fastidieuses, Vite et Tailwind CSS offrent une alternative moderne : un workflow fluide, rapide et efficace, parfaitement adapté à la création de thèmes WordPress en 2025.

Installation des dépendances

Une fois la structure minimale de votre thème WordPress en place, installez les dépendances Vite, Tailwind CSS et le plugin officiel @tailwindcss/vite avec la commande ci-dessous :

npm install -D vite tailwindcss @tailwindcss/vite

Configuration

Configuration de Vite

Créez un fichier vite.config.js à la racine de votre thème avec le contenu suivant :

      // vite.config.js

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  build: {
    assetsDir: '.',
    emptyOutDir: true,
    manifest: true,
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      input: [
        'src/js/main.js',
      ]
    },
  },
  plugins: [
    {
      name: "php-full-reload",
      handleHotUpdate({ file, server }) {
        if (file.endsWith(".php")) {
          server.ws.send({ type: "full-reload", path: "*" });
        }
      },
    },
    tailwindcss(),
  ],
})

Cette configuration est personnalisable selon les besoins de votre projet, mais cette base suffit pour notre exemple.

Création du fichier JavaScript principal

Créez un fichier src/js/main.js avec le contenu suivant :

      // src/js/main.js

import './../css/main.css';

console.log('Custom theme is running with Vite ⚡️');

Ce fichier sert de point d'entrée à Vite.

Création du fichier CSS principal

Créez ensuite un fichier src/css/main.css, puis importez Tailwind CSS :

      /* src/css/main.css */

@import "tailwindcss";

Vite est désormais configuré. Votre arborescence devrait ressembler à ceci :

      mon-theme/
├─ src/
│  ├─ js/
│  │  └─ main.js
│  └─ css/
│     └─ main.css
├─ functions.php
├─ index.php
├─ package-lock.json
├─ package.json
├─ style.css
├─ vite.config.js

À présent, notre thème doit charger nos assets pour bénéficier du futur style CSS et du JS.

Chargement des assets

Dans votre fichier functions.php, ajoutez ce code :

      // functions.php

function registerCustomAssets() {
    $vite_server = 'http://localhost:5173';
    $response = wp_remote_get($vite_server);
    $is_dev = !is_wp_error($response);

    if ($is_dev) {
        wp_enqueue_script_module('vite-client', $vite_server . '/@vite/client', [], null);
        wp_enqueue_script_module('my-theme', $vite_server . '/src/js/main.js', [], null);
    } else {
        $manifest_path = get_theme_file_path('dist/.vite/manifest.json');

        if (!file_exists($manifest_path)) {
            return;
        }

        $manifest = json_decode(file_get_contents($manifest_path), true);

        if (isset($manifest['src/js/main.js'])) {
            $js_file = $manifest['src/js/main.js']['file'];
            wp_enqueue_script('my-theme', get_template_directory_uri() . '/dist/' . $js_file, [], null,
                [
                    'strategy'  => 'defer',
                    'in_footer' => true,
                ]
            );

            $css_file = $manifest['src/js/main.js']['css'][0];
            if (isset($css_file)) {
                wp_enqueue_style('my-theme', get_template_directory_uri() . '/dist/' . $css_file, [], null);
            }
        }
    }
}

add_action('wp_enqueue_scripts', 'registerCustomAssets');

Cette fonction se découpe avec un test pour charger les assets selon l'environnement dans lequel on se trouve :

  • en développement : elle charge les fichiers depuis le serveur Vite
  • en production : elle lit le fichier manifest.json afin de récupérer les chemins des fichiers optimisés générés par Vite

Le tout repose sur les fonctions natives de WordPress :

  • wp_enqueue_script et wp_enqueue_style permettent d’injecter proprement vos fichiers JS et CSS dans votre thème
  • wp_enqueue_scripts est le hook standard pour ajouter les scripts et les styles côté front

Fonctionnement du workflow

Lors de l'installation de Vite, deux scripts sont ajoutés automatiquement à votre package.json :

      "scripts": {
    "dev": "vite",
    "build": "vite build"
}
  • npm run dev lance le serveur de développement
  • npm run build génère les fichiers optimisés pour la production

Lancement du serveur de développement

Utilisez la commande ci-dessous pour lancer votre serveur de développement :

npm run dev

À chaque modification de vos fichiers sources, le navigateur se met à jour automatiquement grâce au rechargement instantané, ou HMR (Hot Module Reloading). Plus besoin de marteler le bouton refresh : vos changements apparaissent sous vos yeux, comme par magie. Un gain de temps précieux, qui vous permet de rester concentré sur l’essentiel.

Démo du serveur de développement Vite avec WordPress et Tailwind CSS

Générer les fichiers pour la production

Une fois le développement terminé, vous pouvez générer une version optimisée de vos fichiers :

npm run build

Cette commande génère les fichiers minifiés et optimisés dans le dossier dist/, prêts à être utilisés en production.

Dans cet exemple, Vite est configuré pour générer un fichier manifest.json dans le répertoire dist/.vite/. Ce fichier contient la correspondance entre les noms des fichiers sources et leurs versions optimisées avec hash.

Notre thème WordPress lit ce fichier, ce qui permet de charger automatiquement les bons chemins, garantissant que les internautes obtiennent la version la plus récente, sans problème de cache navigateur.

Voici un exemple de contenu du fichier manifest.json après un build :

      {
  "src/js/main.js": {
    "file": "main-_-Me5yPC.js",
    "name": "main",
    "src": "src/js/main.js",
    "isEntry": true,
    "css": [
        "main-Dqea8g_S.css"
    ]
  }
}

Code final : orpheebesson/demo-wordpress-vite

Conclusion

Entre l’installation des dépendances, la configuration de Vite et le chargement des assets, vous disposez désormais d’une base moderne, rapide et efficace pour développer un thème WordPress en 2025.

C’est d’ailleurs cette approche que j’utilise personnellement dans mes projets WordPress.

Pour aller plus loin

Timber et l'approche MVC

Si vous souhaitez aller encore plus loin dans la structuration de vos thèmes WordPress, je vous recommande vivement d’explorer Timber pour profiter du templating Twig et d’une architecture proche du MVC.

Concrètement, vos fichiers PHP se concentrent sur la logique et la préparation des données, tandis que vos fichiers Twig s’occupent exclusivement du HTML et du rendu de vos pages.

Résultat : un thème mieux structuré, plus lisible et plus facile à maintenir.

Prenons un exemple simple. Tout d'abord, nous préparons les données dans notre fichier single.php :

      // single.php

use Timber\Timber;

$context = Timber::context();

Timber::render('single.twig', $context);

Ensuite, nous affichons ces données dans le fichier single.twig :

      {# single.twig #}

{% extends 'base.twig' %}

{% block content %}
    <article>
        <h1>{{ post.title }}</h1>
        <img src="{{ post.thumbnail.src }}" alt="{{ post.thumbnail.alt }}" />
        <div class="post-content">{{ post.content }}</div>
    </article>
{% endblock %}

Avec cette séparation claire, vous gagnez en productivité et en lisibilité. Combiné à Vite et Tailwind CSS, Timber devient un excellent allié pour construire vos futurs thèmes WordPress.

Mes autres articles