Tailwind CSS与PostCSS配置异常：自定义插件类未生成

1. 确认代码中已实际使用目标类 #

Tailwind的JIT模式会只生成代码中实际用到的类——哪怕IntelliSense能提示这些类，如果你的组件/页面代码里没有写类似 animation-delay-100 这样的具体类名，CSS文件里就不会出现对应的样式。先检查你的.tsx/.ts文件中是否真的使用了这些自定义类。

2. 显式定义transitionDelay主题值 #

你的自定义插件依赖theme("transitionDelay")获取取值，但当前tailwind.config.ts的theme中没有明确声明该属性。虽然Tailwind有默认的transitionDelay值，但显式扩展能确保取值范围明确，避免因默认主题被意外覆盖导致取值为空：

// 在tailwind.config.ts的theme.extend中添加
extend: {
  // 保留原有配置...
  transitionDelay: {
    '75': '75ms',
    '100': '100ms',
    '150': '150ms',
    '200': '200ms',
    '300': '300ms',
    // 按需添加更多延时值
  },
},

3. 优化自定义插件的写法 #

确认matchUtilities的语法符合Tailwind插件规范，可添加类型声明进一步确保正确性：

plugin(({ matchUtilities, theme }) => {
  matchUtilities({
    'animation-delay': (value) => ({
      'animation-delay': value,
    }),
  }, {
    values: theme('transitionDelay'),
    type: ['string', 'number'], // 明确取值类型
  });
}),

4. 强制清除构建缓存 #

缓存残留可能导致样式不更新，可按项目类型清理：

• Vite项目：删除node_modules/.vite文件夹后重启服务
• Next.js项目：删除.next文件夹后重启服务
• 通用方式：重启IDE+构建服务，确保配置变更被完全加载

5. 补全PostCSS配置 #

当前postcss.config.mjs缺少autoprefixer插件，虽然不会直接导致类不生成，但可能引发其他样式兼容性问题，建议补全：

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
export default config;

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