Conserver les classes TailwindCSS générées dynamiquement

Si vous êtes en train de lire cet article, c’est sûrement qu’il vous ait déjà arrivé d’injecter une classe Tailwind CSS dynamique dans un élément HTML, un peu comme ceci :

<template>
	<div class="alert" :class="'bg-'+alert.color+'-600'">
		<p>{{alert.message}}</p>
	</div> 
</template>

Lors de la phase de développement, tout va bien, mais dès que vient la phase de “build” pour mettre le code en production, on se retrouve avec plusieurs classe Tailwind manquantes !

Mais pourquoi ?

Pour éviter d’avoir des fichiers CSS remplis de classes inutilisées (Tailwind en possède 1500+), la phase de build va permettre de détecter toutes les classes effectivement présentes dans le code, et de générer le fichier final avec uniquement les classes utilisées.

Mais le problème, c’est que Tailwind est incapable de détecter les classes générées dynamiquement comme ceci 'bg-'+alert.color+'-600'

Les solutions

Il existe deux solutions principales, à choisir selon votre cas d’utilisations.

N’hésitez pas à faire une tour sur la documentation officielle, au chapitre “Content Configuration”, pour plus de détails !

Utiliser des noms de classe complets

La différence peut paraitre dérisoire en terme de code, et pourtant cela fait toute la différence lors de la phase de build. Au lieu de “générer” dynamiquement les noms des classes, il faut privilégier l’utilisation des noms complets des classes, et les “utiliser” dynamiquement, comme ceci :

<template>
	<div class="alert" :class="alert.isError ? 'bg-red-600' : 'bg-green-600'">
		<p>{{alert.message}}</p>
	</div>
</template>

À noter que la détection des classes fonctionne également dans les scripts JS/TS si vous utilisez les noms complets des classes !

Configurer une safelist

Dans le fichier de configuration tailwind.config.js, il est possible d’indiquer une liste de classe à inclure dans le fichier final, même si ces classes ne sont pas trouvées dans le code, exemple :

module.exports = {
  //...
  safelist: [
    'text-2xl',
    'text-3xl',
    {
      pattern: /bg-(red|green)-600/,
    },
  ],
}

Comme vous pouvez le voir, il est même possible d’y indiquer des expressions régulières pour inclure plusieurs classes d’un coup !

À noter qu’il est quand même conseillé d’utiliser la solution précédente, pour éviter les oublis !