插件没生成类名？先查 plugins 数组是否注册——必须显式将 require('@tailwindcss/forms') 等插件加入 tailwind.config.js 的 plugins 数组，路径错误、未用 tailwindcss/plugin 包裹、漏掉 e() 转义或 theme() 调用位置不当均会导致静默失效。
插件没生成类名？先查 plugins 数组是否注册
装了插件包但类名死活不出现，90% 是因为没手动加进 tailwind.config.js 的 plugins 数组。Tailwind 不会自动扫描 node_modules，require('@tailwindcss/forms') 这行必须显式写进去，少一个括号或路径写错（比如漏掉 .js 后缀），构建就崩。
常见错误包括：
-
npm install -D @tailwindcss/typography之后，忘了在plugins里加require('@tailwindcss/typography') - 本地插件写成
require('./plugins/my-plugin')，但文件实际叫my-plugin.js，Node 找不到模块 - 多个插件塞进一个
require()，比如require('@tailwindcss/forms,@tailwindcss/typography')—— 必须拆成数组里的独立项
自定义插件必须用 tailwindcss/plugin 包一层
直接 module.exports = { '.my-class': { color: 'red' } } 是无效的。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。
带斜杠或冒号的类名必须用 e() 转义
像 .aspect-16/9 或 .md:hover 这种含特殊字符的类名，不能直接拼字符串。CSS 解析器会把 / 当除法、把 : 当伪类分隔符，导致样式失效。
必须解构 e 参数并显式调用：
module.exports = plugin(function({ addUtilities, e }) {
addUtilities({
[`.aspect-${e('16/9')}`]: { aspectRatio: '16/9' },
[`.md\:${e('hover')}`]: {
'@media (min-width: 768px)': {
'&:hover': { opacity: 0.8 }
}
}
})
})
漏掉 e()，生成的类名要么浏览器解析失败，要么 CSS 语法出错。
text-shadow 这类禁用属性别找插件，走 theme.extend
Tailwind 默认不生成 text-shadow 工具类，不是 bug，是设计取舍。别装已归档的 @tailwindcss/text-shadow —— 它和 v3.3+ 冲突，装了会导致构建失败。
正解是在 tailwind.config.js 的 theme.extend.textShadow 下声明值：
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() 调用，都依赖你在 theme.extend 里提前定义好路径 —— 比如想用 theme('fluidSizes.sm')，就得先在配置里声明 fluidSizes，否则返回 undefined，构建不报错但样式空着。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
