How to configure Content in Tailwind?

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
}

content: [
  // Next.js
  './app/**/*.{js,ts,jsx,tsx,mdx}',
  './pages/**/*.{js,ts,jsx,tsx,mdx}',
  './components/**/*.{js,ts,jsx,tsx,mdx}',

  // Content from packages
  './node_modules/@myorg/ui/**/*.js',

  // HTML files
  './public/**/*.html',
]

module.exports = {
  safelist: [
    'bg-red-500',
    'text-3xl',
    // Pattern matching
    {
      pattern: /bg-(red|green|blue)-(100|500|900)/,
    },
  ],
}

// Won't work - class not detected
const color = 'red'
<div className={`bg-${color}-500`}>

// Works - full class name present
<div className={color === 'red' ? 'bg-red-500' : 'bg-blue-500'}>