Le 16 mars 2025 | Update 16 juillet 2025 | 4 mins read

Tailwind Css sur son Theme Classic Wordpress

J'ai découvert tailwind css il y a peu et n'étant pas le plus doué en html/css, je me suis dis que ca serait sans doute une bonne idée d'utiliser tailwind css pour construire l'ui de ce blog. On trouve beaucoup de ressources, d'exemples et nos amis les LLM savent très bien répondre à des questions sur tailwind css.

Si on veut aller plus loin avec tailwind, on trouve des librairies UI complètes comme daisyui ou chadcn encore qui amènent des composants complets réutilisables out of the box. Pour ce blog, je n'avais pas besoin de surcouche et cela rendrait le site plus lourd et plus complexe pour un gain vraiment minime visuellement. Surtout, je recherche la simplicité !

Requirements

Taper npm --v dans votre terminal pour vérifier si npm est installé et fonctionnel. Si ce n'est pas le cas, il faut installer npm via nodejs par exemple.

Installation

Il y a plusieurs possibilités :

Utiliser un plug-in wordpress (windpress, draft, tailpress, …) (je n'ai pas testé)

En l'installant sur sa machine de dev

Ne souhaitant pas utiliser un plugins, nous allons voir comment installer tailwind css pour son theme classic wordpress via npm. Cette méthode est valable pour la version 3.4.x de tailwind. Des adaptations sont peut être nécessaires pour tailwind version 4.

Packages

Installer tailwind css dans le dossier de votre thème wordpress.
On en profite également pour installer le plugins "typography" pour facilement styliser la single.php avec les class prose et dark:prose-invert.

Il faut se placer dans le dossier de son theme via un terminal.

-> cd /wp-content/themes/sbt
npm install -D tailwindcss
npx tailwindcss init
npm install -D @tailwindcss/typography

tailwind.config.js

Content -> Description des fichiers qui seront analysés pour générer le fichier css.

Darkmode -> Gestion du dark mode via les class : "dark:classname"

Plugins -> typography

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.{php,js,css}","./**/*.{php,js,css}","!./node_modules/**"],
  darkMode: "class",
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')],
}

package.json

Dans package.json, nous configurons les dépendances et les commandes pour lancer tailwind en mod dev ou build. On dit à tailwind de se baser sur le fichier base.css pour écrire style.css.

{
  "devDependencies": {
    "tailwindcss": "^3.4.17"
  },
  "scripts": {
    "build": "tailwindcss -i ./base.css -o ./style.css",
    "watch": "tailwindcss -i ./base.css -o ./style.css --watch"
  }
}

Fichiers css

Créer un fichier css base.css.
Il faut copier dans le fichier base.css le contenu du fichier style.css.
Supprimer tout le contenu du fichier style.css. Il sera réécrit automatiquement à chaque modification/enregistrement ou build.

Mon fichier base.css ressemble à ca :

/*
Theme Name: sbt
Theme URI: https://github.com/NicoDupont/wp-sbt-theme
Author: Nicolas Dupont Lombard
Author URI: https://github.com/NicoDupont
Description: Theme for a minimalist blog with tag functionality, search, pagination, dark or light mode, prism for code block.
Requires at least: 6.7.x
Tested up to: 6.7.x
Requires PHP: 8.x
Version: 1.0
Text Domain: sbt
Tags: data, etl, ...
*/

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

.custom-widget li {
    @apply flex justify-start;
}

.custom-widget a {
    @apply inline-block transform transition-transform origin-center hover:scale-105 dark:text-gray-200;
}

pre {
    @apply rounded-lg overflow-x-auto;
}
code {
    @apply rounded;
}

Utilisation de tailwind css

Développement

npm run watch

A chaque enregistrement d'un fichier php, css ou js, un scan sera effectué pour construire notre css dans le fichier style.css. Le fichier style.css est ensuite utilisé par wordpress.
Le fichier style.css ne contiendra ainsi que les class tailwind et ajouts personnels utiles à notre blog.

Production

npm run build

Le fichier base.css n'est pas utile sur l'environnement de production.

Résumé

L'installation est relativement facile pour un developpeur. Tailwind permet de styliser facilement son site web. La gestion du mode dark est facilité et il est facile d'obtenir un design responsive.

A noter, vous n'avez pas besoin de npm ou nodejs chez votre hébergeur puisque le fichier style.css embarque tous les styles nécessaires en production.

PARTAGE