最轻量解法是用 @apply 在 @layer components 中封装样式，需置于 Tailwind 入口 CSS 文件而非 Vue 组件 style 块；动态类和复杂选择器不支持；高频复用时才封装，否则直接写实用类更佳。
怎么用 @apply 封装 Tailwind 类到 CSS 文件里
直接在 Vue 组件模板里写一堆 bg-blue-500 p-3 rounded hover:bg-blue-600 很快就会失控，尤其当同一套样式在多个地方出现。最轻量、不依赖框架的解法是用 @apply 抽到 CSS 文件中。
关键点：必须放在 @layer components 里，否则会被 PurgeCSS 清掉；且不能用在 Vue 单文件组件的 <style> 块里（JIT 模式下无效）。
- 在
src/styles/tailwind.css或类似入口文件中写：
@layer components {
.btn {
@apply px-4 py-2 font-medium rounded-lg transition-colors;
}
.btn-primary {
@apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50;
}
}
- 然后在任意 Vue 组件中直接用：
<button class="btn btn-primary">Save</button> - 注意：
@apply不支持动态类（比如@apply {{ dynamicClass }}），也不支持嵌套伪类以外的复杂选择器（如.btn:hover .icon）
为什么 Vue 3 组件里别用 @apply 写样式
有人把 @apply 直接塞进 <style scoped>，结果构建后样式消失——这是常见坑。Tailwind 的 JIT 引擎只扫描 content 配置里指定的文件路径，而 <style scoped> 是运行时注入的字符串，根本不会被解析。
- 错误写法（无效）：
<style scoped>
.my-btn {
@apply bg-red-500 text-white px-3 py-1;
}
</style>
- 正确做法：要么提成全局
@layer components类，要么在组件内直接写实用类（更推荐），或用tv()（见下一条） - 如果你坚持要“组件级封装”，就该用逻辑层抽象，而不是 CSS 层抽象
如何用 tailwind-variants 做带变体的 Vue 组件
当按钮需要 variant、size、disabled 等多个开关控制样式时，@apply 就力不从心了。tailwind-variants 是目前最贴近 Vue 开发习惯的方案。
立即学习“前端免费学习笔记（深入）”；
- 安装：
npm install tailwind-variants - 在
composables/useButton.ts里定义：
import { tv } from 'tailwind-variants'
export const buttonVariants = tv({
base: 'inline-flex items-center justify-center rounded-lg font-medium transition-colors',
variants: {
variant: {
solid: 'bg-blue-600 text-white hover:bg-blue-700',
outline: 'border border-blue-600 text-blue-600 hover:bg-blue-50',
},
size: {
sm: 'px-2 py-1 text-sm',
md: 'px-4 py-2',
},
},
defaultVariants: {
variant: 'solid',
size: 'md',
},
})
- 在
Button.vue中使用：class="{ buttonVariants({ variant: props.variant, size: props.size }) }" - 它生成的是真实类名字符串，完全兼容 Vue 的响应式更新和 SSR
- 注意：
tv返回的是函数，不是 CSS 类，所以不能直接写在class属性里，必须调用
什么时候该用 tailwind.config.js 扩展 theme
不要为了复用而扩展 theme。只有当你需要新增一套**语义化设计 token**（比如品牌主色 brand-blue、统一间距 space-card）时，才动 config。
- 例如添加一个企业灰阶：
gray: { 50: '#f9fafb', 100: '#f4f4f5', ... } - 或定义一组卡片圆角：
borderRadius: { card: '0.5rem' } - 这些值之后可在模板中直接用：
class="rounded-card bg-gray-100" - 但别在这里塞组件样式（比如写
components: { btn: '...' }）——Tailwind 官方已废弃该用法，v3+ 不再支持
真正容易被忽略的点：所有提取都应以“是否高频复用”为唯一判断标准。一个样式组合只在两处用到，硬提成组件反而增加心智负担。Tailwind 的哲学不是消灭重复，而是让重复变得无害——直到它开始妨碍协作或维护时，再封装不迟。
