要在JIT tailwind中使用动态类，您需要使用safelist配置键或创建存根文件，在其中列出您将使用的所有动态类。
配置示例：

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    'bg-red-500',
    'text-3xl',
    'lg:text-4xl',
  ]
  // ...
}

或者在src文件夹中创建safelist.txt，然后像这样添加类：

bg-[#84AB86]
bg-[#fffeee]

// etc..

别忘了把这个safelist.txt文件包含到你的配置content中，这样tailwind就可以看到它了。
来自顺风文档的解释
如果您不使用JIT，则可以使用safelist选项来清除CSS：

// tailwind.config.js
module.exports = {
  purge: {
    // Configure as you need
    content: ['./src/**/*.html'],
    // These options are passed through directly to PurgeCSS
    options: {
      // List your classes here, or you can even use RegExp
      safelist: ['bg-red-500', 'px-4', /^text-/],
      blocklist: [/^debug-/],
      keyframes: true,
      fontFace: true,
    },
  },
  // ...
}

从the Tailwindcss documentation开始
动态值注意，当使用任意值时，您仍然需要编写可清除的HTML，并且您的类需要作为完整的字符串存在，以便Tailwind正确地检测它们。
不要使用字符串连接来创建类名--〉<div className={ mt-[${size ==='lg'？'22px'：'17像素'}] }></div>
动态地选择一个完整的类名--〉<div className={ size === 'lg' ? 'mt-[22px]' : 'mt-[17px]' }></div> Tailwind不包含任何类型的客户端运行时，因此类名需要在构建时静态地提取，并且不能依赖于任何类型的在客户端上更改的任意动态值。在这些情况下使用内联样式，或者如果对您的项目有意义，将Tailwind与CSS-in-JS库（如Emotion）结合使用。

一个简单的解决方案是使用内置的样式属性。
例如，在React中：

不要用途：

className={`bg-[${color}]`}

改为使用：

style={{
    backgroundColor: color,
}}

如上所述为了动态地呈现一个定制类：
不喜欢：

className={`bg-[${custom-color}]-100`}

它期望：

const customBgColorLight = 'bg-custom-color-100';

className={`${customBgColorLight} .....`}

要使其正常工作，您必须在tailwind.config.js中包含safelist:[]中的类名。对于tailwind v.3

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  safelist: [
    'bg-custom-color-500', // your-custom-css-class
    'text-custom-color-500',
    'border-custom-color-500',
    ..... // other classes
    'hover:bg-custom-color-500', // *** also include it with the selector if needed *** 
    .... // other classes
  ],
  theme: {
    extend: {
      colors: {
        'custom-color': { // you have to use quotes if key is not in camelCase format
          100: '#d6d6d6',
          500: '#5E8EA2',
          .....          //other variants
        },
        ......           // other colors

因此，您可以使用它：

// if you want store the values to an object
  const yourClassObj = {
    customBgColor: 'bg-custom-color-500',
    customBrdColor: 'border-custom-color-500',
    customTxtColor: 'text-custom-color-500',
  };

  const { customBgColor, customBrdColor, customTxtColor } = yourClassObj;

<YourComponent
   className={`mb-2 font-semibold py-2 px-4 rounded-lg
      ${ conditionGoesHere ? `${customBgColor} text-white cursor-default`
                  : `${customTxtColor} border ${customBrdColor} 
                     bg-transparent hover:border-transparent 
                     hover:${customBgColor} hover:text-white`
              }`}
 />