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

Pourquoi les noms de classe dynamiques ne peuvent pas être utilisés dans Tailwind CSS

Dans Tailwind CSS, les noms de classe sont extraits sous forme de chaînes complètes et ininterrompues de votre code source. Cela signifie que si vous essayez de construire des noms de classe de manière dynamique en utilisant l'interpolation ou la concaténation de chaînes, Tailwind ne les reconnaîtra pas et ne générera pas le CSS correspondant.

Exemple

À titre d'exemple, considérez ce qui suit extrait de code :

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

Dans cet exemple, la propriété className est définie sur un littéral de modèle qui combine la variable colours.secondary avec la chaîne text-text-white. Tailwind ne reconnaîtra pas le nom de la classe bg-[${colors.secondary}] et ne générera pas le CSS correspondant.

Solution

Il existe deux façons de contourner ce problème :

1. Utilisez des noms de classe complets dans vos définitions, comme :

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

2. Utilisez l'attribut style pour définir la couleur d'arrière-plan de manière dynamique, comme :

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

En suivant ces directives, vous pouvez vous assurer que vos noms de classes CSS Tailwind sont générés correctement et que vos styles sont appliqués comme prévu.

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!