Thème personnalisé avec Tailwind CSS

Aperçu

Sur cet exemple, on ajoute la class compact à notre balise body pour activer notre thème personnalisé.

Comment ça marche ?

Nous utilisons le concept de variant que tailwind utilise pour son dark & light mode.

Ok, mais comment mettre ça en place ?

C’est assez simple et rapide, il y a 3 étapes à suivre.

1/3 - tailwind.config.js

Dans votre fichier de config tailwind, il vous faut ajouter 2 choses, la première c’est d’activer les plugins. Pour ce faire, ajouter au début de votre document la ligne suivante :

tailwind.config.js

const plugin = require('tailwindcss/plugin')

Puis, ajouter dans le tableau plugin[] la fonction suivante :

tailwind.config.js

plugins: [
    plugin(function({ addVariant }) {
        addVariant('compact', :is(.compact &))
    })
],

Bien sûr, libre à vous de renommer le variant comme vous le souhaitez.

2/3 - Éléments & class

Ajouter les class souhaitées à vos élément pour qu’il les appliques lorsque le variant est activé. Par exemple si vous avez configuré votre variant avec le nom “compact”, alors vous appliquerez vos class avec le préfixe: compact: .

HTML

<h1 class="compact:text-xl text-3xl">Hello, there!</h1>

Ici, le titre aura pour taille 3xl tant que notre variant “compact” n’est pas activé.

3/3 - Activer le variant

Il suffira alors de passer la class du même nom que votre variant à votre balise <body> pour l’activer.