绝大多数按钮组件应使用 @layer components + @apply，而非插件；它自动继承响应式、状态、深色模式变体，不依赖构建配置，且需置于 @tailwind base 后、utilities 前，同时 content 配置须覆盖使用类的模板文件。
该用 @layer components 还是写插件？
绝大多数项目里的按钮组件，根本不需要写插件——直接用 @layer components + @apply 就够了。Tailwind 的响应式前缀（如 md:p-4）、状态变体（hover:bg-blue-600）、深色模式（dark:bg-gray-800）都会自动继承，改完 CSS 文件就能在 HTML 里直接用 class="btn btn-primary"，不依赖构建配置，也不怕 PurgeCSS 误删。
写插件反而容易踩坑：比如漏注册到 plugins 数组、没用 tailwindcss/plugin 包裹、或误用 addUtilities 去定义本该用 @apply 组合的语义类——这些都会导致类名不生成，且 Tailwind 静默忽略，连报错都没有。
@layer components 必须按顺序写在 CSS 文件里
@layer components 不是随便丢哪儿都生效的。它必须出现在 @tailwind base 之后、@tailwind utilities 之前，否则样式优先级错乱，@apply 可能被覆盖或失效。
常见错误写法：
- 把
@layer components写在@tailwind utilities后面 → 按钮类被工具类覆盖，hover 效果不触发 - 在 Vue/React 组件的
里写@layer components→ 多个组件重复定义，PurgeCSS 扫不到，最终 CSS 里没这个类
正确位置示例（在 src/index.css 中）：
@tailwind base;
@layer components {
.btn { @apply inline-flex items-center justify-center font-medium rounded focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors; }
.btn-primary { @apply bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500; }
}
@tailwind utilities;
content 配置漏掉会导致按钮类被 PurgeCSS 清掉
即使你写了 @layer components，如果 tailwind.config.js 的 content 数组没覆盖到实际使用按钮类的文件，PurgeCSS 仍会把 .btn、.btn-primary 当作“未使用类”干掉。
检查点：
-
content必须包含所有写有class="btn btn-primary"的模板文件路径，比如"./src/**/*.vue"、"./public/**/*.html" - 不要只写
"./src/**/*"—— Tailwind 不识别通配符扩展名，必须显式列出.vue、.jsx等 - 开发时可临时加
safeList: ['btn', 'btn-primary']验证是否是 PurgeCSS 问题
需要动态参数才考虑 matchUtilities
如果你真要支持类似 btn-size-sm、btn-variant-danger 这种带参数的按钮类，@layer components 就不够用了，得上插件 + matchUtilities。
但注意：matchUtilities 不自动支持响应式或深色模式，得手动开启 supportsVariants: true，且斜杠、冒号类名（如 btn-aspect-16/9）必须用 e() 转义，否则浏览器解析失败。
例如生成 btn-size-sm 的最小可用插件结构：
const plugin = require('tailwindcss/plugin');
module.exports = plugin(function({ addUtilities, e }) {
addUtilities({
[`.${e('btn-size-sm')}]: { 'font-size': '0.875rem', 'padding': '0.25rem 0.5rem' }
}, { variants: ['responsive'] });
});
真正难的不是写法，而是决定什么时候不该用它——90% 的按钮定制需求，还是回到 @layer components 更稳、更轻、更易维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
