Construire dynamiquement des noms de classe dans TailwindCss

Question

Je suis actuellement en train de créer une bibliothèque de composants à l'aide de TailwindCss pour mon prochain projet et je viens de rencontrer un petit problème avec le composant Button.

J'ai passé des accessoires comme 'primary' ou 'secondary' qui fonctionnent de la même manière que ce que j'ai fait dans tailwind.config. js, puis je souhaite l'attribuer au composant bouton en utilisant Template Lites comme ceci : bg-${color}-500

. ;

<bouton
    nom de classe={`
    w-40 arrondi-lg p-3 m-2 police-gras transition-toute durée-100 bordure-2 actif:échelle-[0,98]
    bg-${couleur}-500 `}
    onClick={onClick}
    type="bouton"
    tabIndex={0}
  >
    {enfants}
</bouton>

Le nom de la classe s'affiche correctement dans le navigateur, il affiche bg-primary-500 dans le DOM, mais pas dans l'onglet Styles appliqués.

La configuration du thème est la suivante :

thème : {
    étendre: {
      couleurs: {
        primaire: {
          500 : '#B76B3F',
        },
        secondaire : {
          500 : '#344055',
        },
      },
    },
  },
Mais cela n’applique aucun style. Si j'ajoute simplement bg-primary-500 
Honnêtement, je me demande simplement si c'est parce que le compilateur JIT ne récupère pas les noms de classe dynamiques, ou si je fais quelque chose de mal (ou si ce n'est pas la façon d'utiliser tailWind). 
Toute aide est la bienvenue, merci d'avance ! 
            

Answer 1

Il n'est pas recommandé d'écrire les classes CSS Tailwind de cette manière. Même le mode JIT n'est pas pris en charge , pour citer la documentation CSS de Tailwind : "Tailwind n'inclut aucun type d'exécution client, donc les noms de classe doivent être extraits statiquement au moment de la construction et ne peuvent pas être fiables dans le client "

Answer 2

Donc, après avoir découvert que cette façon de travailler est obsolète et que le JIT ne la prend pas en charge (merci au généreux commentateur). J'ai changé l'approche pour une approche plus basée sur la « configuration ».

En gros, je définis un const avec une configuration de base de différents accessoires et je les applique au composant. Cela nécessite plus d’entretien, mais le travail est fait.

Ceci est un exemple de configuration. (aucune saisie n'est requise pour l'instant) et une meilleure refactorisation, mais vous aurez l'idée.

const buttonConfig = {
  // Colors
  primary: {
    bgColor: 'bg-primary-500',
    color: 'text-white',
    outline:
      'border-primary-500 text-primary-500 bg-opacity-0 hover:bg-opacity-10',
  },
  secondary: {
    bgColor: 'bg-secondary-500',
    color: 'text-white',
    outline:
      'border-secondary-500 text-secondary-500 bg-opacity-0 hover:bg-opacity-10',
  },

  // Sizes
  small: 'px-3 py-2',
  medium: 'px-4 py-2',
  large: 'px-5 py-2',
};

Ensuite j'applique le style comme ceci :

<motion.button
    whileTap={{ scale: 0.98 }}
    className={`
    rounded-lg font-bold transition-all duration-100 border-2 focus:outline-none
    ${buttonConfig[size]}
    ${outlined && buttonConfig[color].outline}
    ${buttonConfig[color].bgColor} ${buttonConfig[color].color}`}
    onClick={onClick}
    type="button"
    tabIndex={0}
  >
    {children}
  </motion.button>