Tailwind插件未生效主因是plugins数组漏写require()或未用tailwindcss/plugin包裹；自定义插件必须通过plugin函数注册，theme()仅在函数体内有效；content配置缺失也会导致类不生成。
插件没生效，八成是 plugins 数组里漏了 require()，或者自定义插件没用 tailwindcss/plugin 包一层——Tailwind 会静默跳过，不报错也不生成类。
插件必须显式注册到 plugins 数组
Tailwind 不会自动扫描 node_modules 或本地目录里的插件。装了 @tailwindcss/forms 却没类？大概率只执行了 npm install -D @tailwindcss/forms，但没在 tailwind.config.js 中写：
module.exports = {
plugins: [
require('@tailwindcss/forms'),
require('./plugins/text-gradient.js')
]
}
-
plugins是数组，每个插件必须作为独立元素传入，不能合并或字符串拼接 - 路径错误（比如
require('./plugins/my-plugin')少了.js）会导致构建直接崩溃 - 用
import语法但项目没设"type": "module"？改用.cjs后缀或切回require
自定义插件必须用 tailwindcss/plugin 包裹
直接 module.exports = { '.my-class': { ... } } 是无效的。Tailwind 只识别由 tailwindcss/plugin 创建的函数上下文，否则 addUtilities 和 theme 都不可用。
const plugin = require('tailwindcss/plugin')
module.exports = plugin(function({ addUtilities, theme }) {
addUtilities({
'.text-gradient': {
background: `linear-gradient(90deg, ${theme('colors.blue.500')}, ${theme('colors.purple.500')})`,
'-webkit-background-clip': 'text',
'-webkit-text-fill-color': 'transparent'
}
})
})
-
theme()只能在该函数体内调用，外部访问会报theme is not a function - 类名含斜杠（如
.aspect-16/9）必须解构e并显式调用e('16/9')，否则生成的 CSS 选择器非法 - 想动态生成多组类（比如所有
aspect-*），别硬编码，用Object.entries()转成数组再传给addUtilities
扩展禁用属性（如 text-shadow）优先走 theme.extend
Tailwind 默认不生成 text-shadow 工具类，不是 bug，是设计取舍。别装已归档的 @tailwindcss/text-shadow——它和 v3.3+ 冲突，装了会导致构建失败。
立即学习“前端免费学习笔记（深入）”；
module.exports = {
theme: {
extend: {
textShadow: {
sm: '0 1px 2px rgba(0, 0, 0, 0.1)',
DEFAULT: '0 2px 4px rgba(0, 0, 0, 0.2)',
none: 'none'
}
}
}
}
- 这样就能用
text-shadow-sm、md:text-shadow-lg等，响应式和深色模式前缀都自动支持 - 如果真要用插件方式注入，也得确保
theme.extend.textShadow已提前声明，否则theme('textShadow.sm')返回undefined - 带媒体查询或
.dark的变体，必须作为独立键写入对象，不能嵌套在属性值里
最常被忽略的是 content 配置——哪怕插件注册正确、类名生成无误，如果 content 没覆盖到你实际使用这些类的文件路径（比如 Vue 组件或 Markdown），最终 CSS 里照样没有对应规则。
