Comment utiliser les variables contextuelles avec les noms de classe CSS Tailwind ?

Noms de classe dynamiques avec Tailwind CSS

Lors de l'utilisation de variables de contexte dans React, il est courant de vouloir transmettre ces valeurs en tant que noms de classe à Tailwind CSS. Cependant, cette approche peut rencontrer des limites.

Conventions de dénomination CSS Tailwind

Selon la documentation CSS de Tailwind, elle interprète uniquement les chaînes complètes et ininterrompues comme des noms de classe valides. Les noms de classe dynamiques construits par interpolation ou concaténation ne seront pas reconnus.

Solution :

• Utiliser les noms de classe complets : Définir une classe complète noms dans votre ThemeContext, en vous assurant qu'ils existent en tant que seul chaîne.

• Exemple :

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

• Utiliser l'attribut de style en ligne :

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

  En adhérant à ces solutions, vous pouvez intégrer efficacement des variables de contexte dans votre classe CSS Tailwind noms.

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!