如何在Tailwind CSS中发布主题的所有自定义类？

要让Tailwind生成所有你定义的自定义颜色类（包括未在代码中使用的），可以通过以下配置实现：

1. 调整颜色配置（可选，支持深浅变体） #

如果需要生成text-primary-100这类带深浅后缀的类，需要把tailwind.config.js中的颜色从单个值改为包含不同深浅层级的对象，适配你的现有颜色定义：

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: {
          100: '#FFC68C', // 原primaryLight
          400: '#FF9225', // 原primary
          500: '#EF7C09', // 原primaryDark
          // 可根据需求添加更多深浅层级，如200、300等
        },
        secondary: {
          100: '#EDF7FF', // 原secondaryLight
          400: '#14487E', // 原secondary
          // 可扩展更多深浅值
        },
      },
    },
  },
  prefix: 'bui-',
  corePlugins: {
    preflight: false,
  },
  // 关键配置：强制生成指定类
  safelist: [
    {
      // 匹配所有带bui-前缀的颜色工具类，支持text/bg/border等属性，以及深浅后缀
      pattern: /^(bui-(text|bg|border|ring)-)(primary|secondary)(-\d{2,3})?$/,
      // 可选：生成hover/focus等变体类
      variants: ['hover', 'focus', 'active'],
    },
  ],
  plugins: [],
};

如果不需要深浅变体，只想生成你原本定义的单个颜色类，可简化safelist规则：

safelist: [
  {
    pattern: /^(bui-(text|bg|border|ring)-)(primary|primaryDark|primaryLight|secondary|secondaryLight)$/,
    variants: ['hover', 'focus'],
  },
]

2. 验证构建结果 #

执行你的构建命令后，打开dist/output.css文件，就能看到所有匹配规则的类都已被生成，无论代码中是否使用过它们。

提示：如果后续需要添加更多自定义工具类（如自定义间距、圆角），可以扩展safelist的正则规则，或者直接手动列出需要强制生成的类名。

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