Tailwind CSS @layer 指令

在实际项目开发中，随着自定义的 CSS 越来越多，我们经常会遇到 “使用 Tailwind 类名却不生效” 的优先级覆盖问题。

为了解决类名优先级的问题，Tailwind CSS 为我们提供了一个 @layer 指令。

Tailwind CSS @layer 是什么？

在 Tailwind CSS 中，所有的样式都被严格划分到了 3 个不同的 “层（Layer）” 中。优先级从低到高分别是：base < components < utilities。

语法：

@layer 层名称 {
    /* 你的自定义 CSS 或 @apply 代码 */
}

说明：

其中，这 3 大核心层分别如下：

base（基础层）：专门用于重置 HTML 标签的默认样式（如 body、h1~h6、a）。
components（组件层）：专门用于放置提取出来的复杂组件类名（如 .btn、.card 等）。
utilities（工具层）：专门用于放置单一功能的自定义工具类（如自定义的 .text-shadow 等）。

Tailwind CSS @layer 示例

接下来，我们通过一个简单的例子来讲解一下 Tailwind CSS 中的 @layer 指令是如何使用的。

示例：@layer 分层管理样式

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <style type="text/tailwindcss">
        /* 1. 注入基础层：重置 h2 的默认样式 */
        @layer base {
            h2 {
                @apply text-2xl font-bold text-gray-800 border-b-4 border-green-500 inline-block pb-1;
            }
        }
        /* 2. 注入组件层：定义一个通用的卡片组件 */
        @layer components {
            .card-box {
                @apply p-6 bg-white rounded-xl shadow-md border border-gray-100;
            }
        }
        /* 3. 注入工具层：定义一个 Tailwind 没有的自定义发光工具类 */
        @layer utilities {
            .text-glowing {
                text-shadow: 0 0 12px rgba(25, 182, 148, 0.6);
            }
        }
    </style>
</head>
<body class="p-10 bg-gray-50 flex flex-col gap-8">
    <h2>绿叶网</h2>
    <div class="card-box bg-gray-800">
        <p class="text-glowing text-white font-bold text-lg">
            为好教程，全力以赴
        </p>
    </div>
</body>
</html>

页面效果如下图所示。

Tailwind CSS @layer 分层管理样式

分析：

在这个例子中，我们把代码分门别类地放进了 3 个对应的层里。其中，最巧妙的地方在于中间那个 div：使用了组件类名 .card-box（它自带白底 bg-white），但我们又紧接着写了 Tailwind 工具类名 bg-gray-800。

小伙伴们在运行后会发现，背景变成了深灰色。为什么呢？这是因为我们把 .card-box 放到了 components 层。Tailwind 的底层逻辑是：工具类名的优先级永远高于组件类名。

最后有小伙伴会问：“我们直接写成普通 CSS 也能生效，为什么非要套一层 @layer 呢？” 其实，这是很多前端新手（包括以前的我）最大的困惑。

如果你不写 @layer，而是直接写原生 CSS：

.btn { 
    background-color: blue;
}

然后在 HTML 里写：

<button class="btn bg-red-500">按钮</button>

你可能预期是希望使用 “bg-red-500” 这个工具类名去覆盖掉按钮的蓝色，使其变成红色。但由于 CSS 加载顺序的原因，很有可能 .btn 的优先级和 bg-red-500 发生了冲突，从而导致按钮依然是蓝色的。

如果我们写成：

@layer components {
    .btn { background-color: blue; }
}

此时就相当于告诉 Tailwind：“这是一个普通的组件，它的地位比较低。” 这样一来，不管我们怎么写，Tailwind 内置的工具类名（如 bg-red-500）都能做到 100% 绝对覆盖！这也正是 @layer 存在的最核心价值——维持系统化优先级的绝对稳定。