Tailwind插件需显式注册到plugins数组并用tailwindcss/plugin包裹,theme()须在插件函数内调用,带特殊字符的类名必须用e()转义,禁用属性需通过theme.extend配置。

插件写好了但类名没生成,基本就是 plugins 数组漏注册,或者没用 tailwindcss/plugin 包一层——Tailwind 会静默跳过,连报错都没有。
插件必须显式注册到 plugins 数组
装了 @tailwindcss/forms 却没 form-input 类?不是包没装对,是 tailwind.config.js 里少了一行 require('@tailwindcss/forms')。Tailwind 不扫描 node_modules,全靠你手动塞进 plugins 数组。
-
plugins是数组,每个插件必须独立写:✅require('@tailwindcss/forms'),❌require('@tailwindcss/forms,@tailwindcss/typography') - 本地插件路径要带后缀:
require('./plugins/my-plugin.js'),漏掉.js会导致构建崩溃 - 用
import语法但项目没设"type": "module"?改用.cjs后缀,或切回require
自定义插件必须用 tailwindcss/plugin 包裹
直接 module.exports = { '.my-class': { color: 'red' } } 是无效的。Tailwind 只认由 tailwindcss/plugin 创建的函数上下文,否则 addUtilities、theme 全不可用。
- 正确结构:先
const plugin = require('tailwindcss/plugin'),再module.exports = plugin(function({ addUtilities, theme }) { ... }) -
theme()只能在该函数体内调用;外部提前取值会报theme is not a function - 想动态生成多组类(比如所有
aspect-*),别硬编码,用Object.entries()转成数组再传给addUtilities
带斜杠或冒号的类名必须用 e() 转义
.aspect-16/9 或 .md:hover 这种类名不能直接拼字符串。CSS 解析器会把 / 当除法、把 : 当伪类分隔符,导致样式失效。
立即学习“前端免费学习笔记(深入)”;
- 解构
e参数:module.exports = plugin(function({ addUtilities, e }) { ... }) - 转义写法:
[`.aspect-${e('16/9')}`]、[`.md\:${e('hover')}`](注意双反斜杠转义冒号) - 漏掉
e(),生成的类名在浏览器里根本不会生效
扩展禁用属性(如 text-shadow)优先走 theme.extend
像 text-shadow 这类默认不生成工具类的属性,不是插件没写对,是 Tailwind 故意禁用。装社区插件(比如已归档的 @tailwindcss/text-shadow)反而会导致构建失败。
- 正解是在
tailwind.config.js的theme.extend.textShadow下声明值 - 示例:
textShadow: { sm: '0 1px 2px rgba(0,0,0,0.1)', none: 'none' },之后就能用text-shadow-sm - 响应式前缀(如
md:text-shadow-lg)自动支持,不用额外处理
最常被忽略的是 theme() 的作用域限制和 e() 的强制转义——这两个点不出错时一切正常,一出错就完全没类名,还查不到原因。


















