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 "

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>