为什么Tailwind CSS 4自定义类名没有生成

Tailwind插件未生效的主因是未在tailwind.config.js的plugins数组中手动注册，且自定义插件必须用tailwindcss/plugin封装并显式调用addUtilities等API，否则类名不会进入构建流程。

tailwind.config.js 里没注册插件，或者插件函数没用 tailwindcss/plugin 包装 —— 类名根本不会进构建流程。

插件没加进 plugins 数组

Tailwind 不会自动发现 node_modules 里的插件，必须手动引入并放进配置的 plugins 字段。

1. 只运行了 npm install -D @tailwindcss/typography，但 tailwind.config.js 里没写 require('@tailwindcss/typography')
2. 用了 import 语法，但项目没设 "type": "module"，导致 require 报错或静默失败
3. 本地插件路径写错，比如 require('./plugins/my-plugin')，但文件实际在 ./src/plugins/

自定义插件没用 tailwindcss/plugin 封装

直接导出对象或函数，Tailwind 完全不识别。

1. 错误写法：module.exports = { '.my-utility': { display: 'flex' } } —— 这个对象会被忽略
2. 正确写法：必须用 const plugin = require('tailwindcss/plugin')，再 plugin(function({ addUtilities }) { ... })
3. theme() 只能在插件函数内部调用，外部写 theme: { extend: { ... } } 是无效的

插件里没调用 addUtilities 或 addComponents

即使插件被加载了，如果没显式注册样式，类名还是不会生成。

1. 写了 plugin(() => {})，但函数体为空，或只写了 console.log
2. 想加响应式类，但忘了传 variants 参数：addUtilities(..., { variants: ['hover', 'group-hover'] })
3. 用 addComponents 加组件类时，没加 @layer components 前缀，导致优先级或 Purge 行为异常

PostCSS 插件没启用，@tailwind 指令被当注释

tailwind.config.js 配对正确，插件也注册了，但最终 CSS 文件里全是 @tailwind base; 这种原样文本。

1. Vite 用户：检查 postcss.config.js 是否含 require('@tailwindcss/postcss')（不是旧版 tailwindcss）
2. CRA 用户：默认禁用 PostCSS 自定义，得用 craco 注入，或 eject
3. Webpack 用户：确认 css-loader 的 modules 选项是 false；开启后类名被哈希化，和插件生成的原始类名对不上

插件逻辑本身没问题，但漏掉任意一环 —— 从注册、封装、调用到 PostCSS 链路 —— 类名就彻底消失。调试时先查构建产物里有没有对应 CSS 规则，再逆向验证每层是否真正生效。