如何通过Tailwind CSS编写可复用的组件？-css教程-PHP中文网

@layer components 是最轻量可控的 tailwind 封装方案；它需置于全局 css 中、严格遵循顺序与命名规则，不支持多行 @apply 或嵌套语法，复杂变体组合应改用 tailwind-variants。

如何通过tailwind css编写可复用的组件？

直接用 @layer components 封装是目前最轻量、最可控、也最符合 Tailwind 哲学的方案；其他方式要么构建时失效，要么引入运行时开销，要么调试困难。

为什么不能在组件 `<style></style>` 块里写 `@apply`

Tailwind 的 JIT 引擎只扫描 content 配置中声明的文件路径（如 src/**/*.{js,ts,jsx,tsx}），而 Vue/React 单文件组件里的 <style scoped></style> 是运行时注入的字符串，根本不会被解析——写了等于白写。

构建后样式消失，开发时看似正常，上线就出问题
即使强行生效，PurgeCSS 也会把未在 HTML 中显式出现的类清掉
必须把 @layer components 放在全局 CSS 文件中（如 src/styles/tailwind.css），且严格位于 @tailwind base 之后、@tailwind utilities 之前

`@layer components` 的正确写法和常见翻车点

它不是语法糖，而是有明确规则的构建契约。写错顺序、命名或嵌套方式，都会导致类不生成或优先级错乱。

命名必须加前缀（如 .btn-primary），避免未来与 Tailwind 新增原生 class 冲突
所有变体（hover:、disabled:、md:）必须写在同一行 @apply 中，分多行会覆盖
不支持 &:hover 这类嵌套写法，得显式写 @apply hover:bg-blue-600
不能在 @layer utilities 或 @layer base 中定义组件类，会被忽略

正确示例：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-600 text-white rounded font-medium hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50;
  }
}

什么时候该换 `tailwind-variants`？

当组件需要根据多个正交 props 动态组合样式时，@layer components 就力不从心了——它无法条件拼接，也不处理变体依赖关系。

比如按钮同时支持 variant="outline" + size="sm" + color="green" + disabled，且这些参数可任意组合
结构联动场景：如 group-open:rotate-180 需要父元素带 group，子元素响应状态，纯 CSS 类无法表达这种父子契约
主题切换涉及大量变量映射（如暗色模式下所有 bg-gray- 都要重映射），tv 可通过 extend 和 defaultVariants 统一收口