Pourquoi le nom de classe de chaîne concaténée ne fonctionne-t-il pas dans Tailwind ?

Question

Chaque fois que je finis par utiliser l'attribut style en dehors de className car aucun des exemples ci-dessous n'applique de style à mes éléments React. Pouvez-vous expliquer pourquoi cela se produit et comment puis-je y remédier ?

J'ai lu la documentation (https://tailwindcss.com/docs/content-configuration#dynamic-class-names) mais mon cas d'utilisation est le suivant : l'utilisateur sélectionne une couleur dans le sélecteur de couleurs, puis je sélectionne la couleur en fonction sur l'arrière-plan de changement de couleur sélectionné. Je ne peux pas transmettre la valeur de "bg-[colorValue]" à chaque couleur individuelle, je dois donc concaténer la valeur avec "bg-[" par la suite. Parce que je ne peux pas mapper toutes les couleurs dans le nom complet de la classe.

const red500 = "red-500";
const red600Hex = "#dc2626";
const bgColor = "bg-[" + red600Hex + "]";
const bgColor2 = "bg-[" + "#dc2626" + "]";

function App() {
    return (
        <>
            <h1 className={` bg-${red500} `}>Hello</h1>
            <h1 className={` bg-[${red600Hex}] `}>Hello</h1>
            <h1 className={` bg-${`[${red600Hex}]`} `}>Hello</h1>
            <h1 className={` ${bgColor} `}>Hello</h1>
            <h1 className={` ${bgColor2} `}>Hello</h1>
        </>
    );
}

Answer 1

Lorsque les chaînes littérales du modèle fonctionnent correctement, vous n'avez pas à vous soucier de la concaténation des chaînes.

const red500 = 'red-500';
const red600Hex = '#dc2626';
const bgColor = `bg-[${red600Hex}]`;
const bgColor2 = `bg-[${'#dc2626'}]`;

export function App() {
  return (
    <>
      <h1 className={` bg-${red500} `}>Hello</h1>
      <h1 className={` bg-[${red600Hex}] `}>Hello</h1>
      <h1 className={` bg-${`[${red600Hex}]`} `}>Hello</h1>
      <h1 className={` ${bgColor} `}>Hello</h1>
      <h1 className={` ${bgColor2} `}>Hello</h1>
    </>
  );
}

Aire de jeux Tailwind

Le lien ci-dessus m'a également donné un avertissement concernant la concaténation : "Bug Finder : Concaténation de chaînes inattendue de literals.eslint"

J'ai même ajouté une option pour contrôler dynamiquement la couleur du dernier h1 via l'état :

const colors = [
  {value: "#dc2626"},
  {value: "#dc06e6"},
  {value: "#dce606"},
]


export function App() {
  const [color, setColor] = React.useState(colors[0].value)
  return (
    <>
      <h1 className={`text-green-500 bg-${red500} `}>Hello</h1>
      <h1 className={`bg-[${red600Hex}] `}>Hello</h1>
      <h1 className={`text-green-200 bg-${`[${red600Hex}]`} `}>Hello</h1>
      <h1 className={`${bgColor} `}>Hello</h1>
      <h1 className={`bg-[${color}]`}>Hello</h1>
      <select onChange={(e) => setColor(e.currentTarget.value)}>
        {colors.map(c => <option className={`bg-[${c.value}]`} value={c.value}>{c.value}</option>)}
      </select>
    </>
  );
}