如何在Tailwind CSS中复用复杂样式-css教程-PHP中文网

@apply 在响应式或暗色模式组合下会静默失效，因其为 postcss 静态处理，不支持嵌套变体、媒体查询或交叉逻辑；推荐用 @layer components 实现静态复用，动态场景则使用 tailwind-variants。

如何在tailwind css中复用复杂样式

@apply 在响应式或暗色模式组合下会静默失效

写 @apply md:p-6 hover:bg-gray-100 dark:hover:bg-gray-800 看似合理，但编译后大概率只生成普通声明，md: 和 dark:hover: 会被丢弃或忽略——因为 @apply 是 PostCSS 静态处理，不递归解析嵌套变体、不包裹媒体查询、也不理解交叉逻辑。

常见错误现象：

页面在中屏尺寸下无 padding，hover 时背景不变，暗色模式下 hover 失效
Vue / Svelte 单文件组件的 <style scoped></style> 里用 @apply，样式根本不出现在最终 CSS 中
跨文件复用带 focus: 或 disabled: 的类，构建后 focus 样式缺失

这不是配置问题，是机制限制。别指望它“多试几次就对了”。

@layer components 是最轻量且可靠的静态复用方式

把语义化类名写进 @layer components，JIT 引擎能完整识别所有变体并生成对应规则，且不增加额外 CSS 体积。

实操建议：

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

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

下载

在全局 CSS（如 src/styles/components.css）中定义：

@layer components {
  .avatar {
    @apply w-16 h-16 rounded-full border-2 border-white;
  }
  .card {
    @apply p-4 bg-white rounded-md shadow-sm hover:shadow-md transition-shadow;
  }
}

确保该文件被 @tailwind components 引入，且路径在 tailwind.config.js 的 content 数组中被扫描到
不推荐在 @layer utilities 里放复合样式——它本意是扩展原子能力，不是封装组件

动态变体场景必须用 tailwind-variants

当组件需要根据 variant、size、disabled 等 prop 切换样式时，硬编码类名或 @apply 都会失控。

示例（TypeScript）：

import { tv } from "tailwind-variants";

const button = tv({
  base: "inline-flex items-center justify-center rounded font-medium transition-colors",
  variants: {
    variant: {
      primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500",
      outline: "border border-gray-300 text-gray-700 hover:bg-gray-50",
    },
    size: {
      sm: "text-sm px-3 py-1.5",
      md: "text-base px-4 py-2",
    },
  },
});

// 使用：button({ variant: "primary", size: "md" }) → 返回合法原子类字符串

关键点：