如何让NextJS 14+Tailwind 3.3.5的safelist类名在CSS构建中生效？

我用Next.js + Tailwind + Next-Themes开发、SST部署的项目里，遇到了动态类名不生效的问题——只是想做一个能接收type属性（warning、success、danger等）、根据属性生成对应样式的按钮组件，却折腾了两天才解决。

这个需求的复杂度在于两点：

1. tailwind.config.ts里用了自定义颜色
2. 需要根据按钮类型和状态（hover、选中、禁用等）动态分配样式变体

有人说这种动态类名的方式违背Tailwind设计理念，3.0的JIT模式下没法实现，但实际上是可行的。

我试过的无效方案 #

• 在Tailwind配置里加purge对象：v3.3版本里这不是定义safelist的正确方式，虽有效果但不规范
• 硬编码safelist项：比如hover:bg-red-500，有效但要为每个状态写大量变体，完全不优化
• 使用不带$结尾的正则：/(bg|border|text)-(zinc|red|green|yellow)-(100|200|300|400|500|600|700|800|900)/，奇怪的是这个正则没法修改构建后的.next/server/app/css文件，但硬编码的safelist却可以
• 修改tailwind config的content路径：其他样式编译正常，排除这个问题
• 运行Tailwind推荐的生产构建minify命令：无效
• 简化正则模式：只保留背景色相关的正则，还是无效
• 修改postcss.config.js：不仅没解决问题，还破坏了.next里的依赖内容
• 把globals.css里的@tailwind改成@import：完全没效果
• 嵌套循环生成所有可能的类名并注入隐藏组件：代码臃肿不优雅，还导致编译挂起

最终可行解决方案 #

1. 关闭当前运行的应用进程
2. 删除项目根目录下的.next文件夹
3. 修改tailwind.config.ts，在safelist中添加带$结尾的正则规则（$用来排除带透明度后缀的类名），同时指定需要的变体：

module.exports = {
  darkMode: ["class"],
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  safelist: [
    {
      pattern:
        /(bg|text|border)-(zinc|red|green|yellow)-(100|200|300|400|500|600|700|800|900)$/,
      variants: ["hover"],
    },
  ],
  // ...其他配置
}

4. 重新运行npm run dev（或你的项目启动命令），生成新的.next文件夹
5. 刷新浏览器，新的CSS文件会在.next中生成，动态类名即可正常生效

完整配置示例 #

src/app/globals.css（前3行） #

@tailwind base;
@tailwind components;
@tailwind utilities;
//... 其余CSS代码

./postcss.config.js #

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

src/app/layout.tsx（第一行） #

import "./globals.css"
//... 其余TSX代码

tailwind.config.ts（前13行） #

const plugin = require("tailwindcss/plugin")

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  safelist: [
    {
      pattern:
        /(bg|text|border)-(zinc|red|green|yellow)-(100|200|300|400|500|600|700|800|900)$/,
      variants: ["hover"],
    },
  ],
  //... 其余配置
}

动态类名使用示例 #

现在可以正常使用函数生成动态类名，根据按钮状态返回对应样式：

const colorClassName = () => {
    return `${borderOrBg}-${baseColors[color]}-${shade} hover:${borderOrBg}-${
      baseColors[color]
    }-${shade + 200}`
  }

内容的提问来源于stack exchange，提问作者Samuel Tanner