Pourquoi ne puis-je pas utiliser de noms de classe dynamiques avec Tailwind CSS ?

Comprendre les limites des noms de classe dynamiques dans Tailwind CSS

Problème :

Lors de la tentative de transmission d'une variable de contexte en tant que une valeur à un nom de classe CSS Tailwind, l'opération échoue. Ce problème survient en raison de l'incapacité de Tailwind à extraire les noms de classe dynamiques.

Explication :

Tailwind CSS fonctionne sur le principe de l'identification des noms de classe sous forme de chaînes complètes et ininterrompues. dans la base de code. Si les noms de classe sont construits dynamiquement ou concaténés, Tailwind ne peut pas les reconnaître et ne parvient donc pas à générer le CSS correspondant. Ce comportement est explicitement décrit dans la documentation officielle, qui décourage la construction dynamique de noms de classe.

Solution :

Pour relever ce défi, assurez-vous que les noms de classe utilisés sont complets et non composés de parties dynamiques. Envisagez de définir des noms de classe complets dans votre contexte, comme dans l'exemple suivant :

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

Vous pouvez également envisager d'utiliser l'attribut style pour attribuer des valeurs dynamiques :

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

En adhérant à Ces directives, Tailwind CSS identifiera et générera avec précision les règles CSS souhaitées.

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!