使用cn工具与自定义前缀时，Tailwind移除动态生成类的解决咨询

方案1：使用自定义变体（Custom Variants） #

这是最贴合Tailwind设计理念的方案，把你需要的子元素选择器封装成自定义变体，直接静态使用类名，避免动态生成导致的检测问题。

首先在tailwind.config.js中添加自定义变体：

module.exports = {
  plugins: [
    function ({ addVariant }) {
      // 定义针对子元素p的变体
      addVariant('p-child', '&_p');
      // 按需添加更多子元素变体
      addVariant('span-child', '&_span');
    },
  ],
};

修改组件代码，直接使用这些变体：

import { cn } from './path-to-cn';

const TestPage = () => {
  return (
    <div className={cn("text-black", "p-child:bg-red-200", "p-child:absolute")}>
      Test Page
      <p>asdf</p>
      <span>asdf</span>
      <p>asdflasdf</p>
    </div>
  );
};
export default TestPage;

Tailwind会静态识别这些变体类，不会清除它们，写法也更简洁直观。

方案2：静态声明类名模式（供Tailwind检测） #

如果需要保留withPrefix函数，可以创建一个专用文件（比如tailwind-safe-patterns.js），静态声明所有可能用到的前缀+类名模式，让Tailwind的JIT引擎检测并生成对应类：

// tailwind-safe-patterns.js
// 告知Tailwind需要生成这些模式下的类
const tailwindSafePatterns = [
  '[&_p]:bg-*',
  '[&_p]:absolute',
  '[&_p]:text-*',
  '[&_span]:bg-*',
  // 添加所有可能用到的前缀+属性组合模式
];

确保该文件被包含在Tailwind配置的content数组中，Tailwind会扫描到这些模式，生成对应类，动态生成的类也不会被清除。

方案3：自定义内容提取器（进阶） #

如果withPrefix调用格式固定，可以在Tailwind配置中自定义内容提取器，手动解析代码中的withPrefix调用，提取完整类名：

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    {
      files: ['./src/components/TestPage.jsx'], // 目标文件或全局匹配路径
      extract: {
        jsx: (content) => {
          // 匹配withPrefix(prefix, classes)的调用格式
          const regex = /withPrefix\(["']([^"']+)["'],\s*["']([^"']+)["']\)/g;
          const extractedClasses = [];
          let match;
          
          while ((match = regex.exec(content)) !== null) {
            const prefix = match[1];
            const classes = match[2].split(' ');
            // 拼接前缀与每个类，加入提取列表
            classes.forEach(cls => extractedClasses.push(`${prefix}${cls}`));
          }
          
          return extractedClasses;
        },
      },
    },
  ],
};

这个方法能自动提取动态生成的类名，但需要保证withPrefix的调用格式符合正则匹配规则，适合复杂但有规律的动态类场景。

内容的提问来源于stack exchange，提问作者Misha Nesteruk