It is not recommended to write Tailwind CSS classes in this way. Even JIT mode is not supported, to quote the Tailwind CSS documentation: "Tailwind does not include a client runtime of any kind, so class names need to be statically extracted at build time and cannot be relied upon in the client ”

So after finding out that this way of working is deprecated and the JIT does not support it (thanks to the generous commenter). I've changed the approach to a more "configuration" based approach.

Basically, I define a const with a base configuration of different props and apply them to the component. This requires more maintenance, but it gets the job done.

This is a configuration example. (no typing required for now) and some better refactoring, but you'll get the idea.

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',
};

Then I apply the style like this:

<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>