插件未生成 .btn 或 .card 类，主因是 tailwind.config.js 的 plugins 数组未显式引入插件路径；需正确使用 addComponents（结构组件）、addUtilities（原子工具类）、addBase（重置类），并用 e() 转义特殊字符类名，theme() 须在插件函数体内调用。
插件没生成 .btn 或 .card 类？先查 plugins 数组是否注册
装了插件但自定义组件类名压根不生效，八成是 tailwind.config.js 的 plugins 数组里漏了 require('./plugins/my-component.js')。Tailwind 不会自动扫描 node_modules 或本地目录，必须显式引入并作为数组项传入。
常见错误包括：
-
npm install -D @wedges/tw-plugin后，忘了在plugins里加require('@wedges/tw-plugin') - 本地插件路径写成
require('./plugins/card')，但实际文件叫card.js，Node 找不到模块直接崩溃 - 把多个插件塞进一个
require()，比如require('@tailwindcss/forms,@tailwindcss/typography')——必须拆成独立数组元素
addComponents 和 addUtilities 别混用
addComponents 是给结构固定、复用性强的 UI 块用的，比如 .btn、.card；addUtilities 是给原子化、可叠加的工具类用的，比如 .text-gradient、.rotate-135。混用会导致样式注入位置错乱，响应式前缀或 .dark 变体可能失效。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 用
addComponents注册.card：它包含&:hover、&.active这类嵌套规则，且不应被用户随意覆盖 - 用
addUtilities注册.sr-only-focusable：它是纯工具类，需支持md:sr-only-focusable、dark:sr-only-focusable等变体 - 基础重置类（如表单默认边框、字体）该用
addBase，不是addUtilities，否则会被border-none这类工具类意外覆盖
带冒号或斜杠的类名必须用 e() 转义
像 .btn-lg、.aspect-16/9 或 .md:hover 这种含特殊字符的类名，不能直接拼字符串。CSS 解析器会把 / 当除法、把 : 当伪类分隔符，导致样式无效。
必须解构 e 参数并显式调用：
module.exports = plugin(function({ addComponents, e }) {
addComponents({
[`.btn-${e('lg')}`]: { padding: '0.75rem 1.5rem', fontSize: '1.125rem' },
[`.aspect-${e('16/9')}`]: { aspectRatio: '16/9' },
[`.md\:${e('hover')}`]: {
'@media (min-width: 768px)': {
'&:hover': { opacity: 0.8 }
}
}
})
})
漏掉 e()，生成的类名就是 .btn-lg（正常），但 .aspect-16/9 会变成浏览器无法识别的语法，.md:hover 会触发 CSS 解析错误。
theme() 只能在插件函数体内安全调用
theme('colors.primary.600') 这类调用必须放在 plugin(function({ addComponents, theme }) { ... }) 的函数体内。一旦写在 module.exports 外层，或者提前赋值给变量再传入，就会报 theme is not a function。
另外注意：
-
theme()只读取tailwind.config.js中已声明的路径，比如theme('spacing.4')有效，但theme('fluidSizes.xs')必须先在theme.extend里定义过 - 建议加 fallback：
theme('colors.primary.500', '#3b82f6')，避免主题未定义时构建失败 - 动态生成多组组件类（如所有
.btn-*）别硬编码，用Object.entries(theme('spacing'))转成数组再传给addComponents
e() 和 theme() 都不是全局函数，它们只在插件函数执行时由 Tailwind 注入。漏掉这层包装，或者调用位置错位，插件就只是个安静的 JS 文件，不会生成任何 CSS。 
