Comment utiliser les noms de classe dynamiques avec Tailwind CSS ?

Noms de classe dynamiques et CSS Tailwind

La construction dynamique de noms de classe en JavaScript est une pratique courante, mais lorsqu'il s'agit de CSS Tailwind, cela pose un défi. Tailwind CSS repose sur l'extraction de noms de classe complets et ininterrompus à partir de vos fichiers sources.

Selon la documentation de Tailwind, la construction dynamique de noms de classe à l'aide de l'interpolation ou de la concaténation de chaînes empêchera Tailwind de trouver les classes et donc de ne pas générer le CSS correspondant. Par exemple :

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

Dans cet exemple, les chaînes text-red-600 et text-green-600 n'existent pas en tant que noms de classe complets, donc Tailwind les ignore.

Solutions :

Pour résoudre ce problème, il existe plusieurs solutions :

• Utiliser les noms de classe complets :
  Assurez-vous que tous les noms de classe que vous utilisez existent sous leur forme complète.

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

• Définir les noms de classe dans les variables :
  Définir les noms de classe dans les variables qui peuvent être directement référencé.

const colors = {
  // ...
  secondary: darkTheme ? "bg-[#FFFFFF]" : "bg-[#FFFFFF]",
  // ...
};

<p className={`${colors.secondary} text-text-white`}></p>

• Utiliser l'attribut de style :

<p className="text-text-white">

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!