Tailwind插件不生效的主因是plugins未注册、缺少tailwindcss/plugin包裹、content未覆盖使用路径；必须require显式引入、路径带.js后缀、用plugin()包裹函数、addUtilities注入工具类、matchUtilities处理动态类名、content配置扫描范围。
插件不生效，基本不是代码写错了，而是 plugins 数组没注册、tailwindcss/plugin 没包、或者 content 没扫到使用位置——Tailwind 会静默跳过，不报错也不生成类。
插件必须显式注册进 tailwind.config.js 的 plugins 数组
装了 @tailwindcss/forms 或写了本地插件，不代表 Tailwind 会自动加载。它只认 plugins 数组里明确 require() 进来的模块。
-
require('@tailwindcss/forms')必须作为独立数组项写入，不能合并成字符串或塞进一个require() - 本地插件路径要带
.js后缀：require('./plugins/text-gradient.js')，漏掉就构建崩溃 - 如果插件导出的是对象（比如
module.exports = { '.my-class': { } }），Tailwind 完全静默忽略，不报错也不生成 CSS
自定义插件必须用 tailwindcss/plugin 包裹
裸对象、裸函数、顶层调用 addUtilities 都无效。只有 tailwindcss/plugin 创建的函数上下文，才能安全使用 addUtilities、theme、e 等参数。
- ✅ 正确：
const plugin = require('tailwindcss/plugin'); module.exports = plugin(({ addUtilities, theme }) => { addUtilities({ '.text-gradient': { /* ... */ } }); }); - ❌ 错误：
module.exports = { '.text-gradient': { /* ... */ } };—— Tailwind 直接跳过 - ❌ 错误：
module.exports = ({ addUtilities }) => { addUtilities({}); };—— 缺少plugin()包裹，theme不可用，构建报错 -
theme('colors.blue.500')只能在该函数体内调用；外部提前取值会报theme is not a function
addUtilities 只接受扁平样式对象，动态类名要用 matchUtilities
addUtilities 是注入工具类的唯一安全方式，但它不支持嵌套、伪类或动态参数。硬编码所有组合（如 aspect-16/9、text-2.5rem）不可维护。
立即学习“前端免费学习笔记（深入）”；
- ❌ 不支持：
'.btn': { '&:hover': { backgroundColor: 'blue' } }—— 静默失败，该用addComponents - ✅ 响应式要手动展开：
'@media (min-width: 768px)': { '.md\:sr-only': { position: 'absolute' } }（注意双反斜杠转义冒号） - ✅ 深色模式需显式组合：
'.dark .dark\:bg-brand': { backgroundColor: theme('colors.brand.500') } - ✅ 动态类名（如
aspect-16/9）必须用matchUtilities，且含斜杠/冒号时得解构e并显式调用：[`.aspect-${e('16/9')}`]
content 配置缺失会导致类根本不会生成
哪怕插件注册正确、addUtilities 写对了，只要 content 数组没覆盖到实际使用该类的文件路径（比如 ./src/**/*.{js,ts,jsx,tsx}），Tailwind 就不会扫描到这个类名，最终 CSS 里压根没有它。
-
content是按需生成的开关，不是可选配置 - 本地插件新增的类名，必须出现在
content扫描到的 HTML、JSX、TSX 等模板中，才会被打包 - 常见疏漏：插件加在
./src/plugins/，但content没包含./src/**/*.{js,ts}，结果类名永远不出现
最容易被忽略的是 e() 转义和插件顺序：漏掉 e('16/9')，生成的 .aspect-16/9 在浏览器里解析失败；把依赖前一个插件 theme.extend 的插件放太前面，theme() 就取不到值。
