44. @layer 分层与样式组织

CSS 的层叠特性经常让人头疼——样式之间互相覆盖，最后谁说了算？Tailwind 的分层系统就是来解决这个问题的。

三层架构

Tailwind 的样式分为三层，优先级从低到高：

base → components → utilities

• base：全局基础样式，如 reset、默认字体
• components：组件类，如 .btn、.card
• utilities：工具类，如 flex、px-4

@layer base {
  body {
    font-family: var(--font-sans);
    color: var(--color-gray-900);
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
  }
}

@layer utilities {
  .scrollbar-hidden {
    scrollbar-width: none;
  }
}

base 层

base 层用于设置全局默认样式，相当于 v3 的 @tailwind base：

@layer base {
  /* 设置全局字体 */
  body {
    font-family: var(--font-sans);
    color: var(--color-gray-900);
    background-color: var(--color-white);
  }
  
  /* 标题默认样式 */
  h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
  }
  
  h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
  }
  
  /* 链接默认样式 */
  a {
    color: var(--color-blue-600);
    text-decoration: underline;
  }
  
  /* 表单元素默认样式 */
  input::placeholder,
  textarea::placeholder {
    color: var(--color-gray-400);
  }
}

components 层

components 层用于定义可复用的组件类：

@layer components {
  /* 按钮组件 */
  .btn {
    @apply px-4 py-2 font-medium rounded-lg transition-colors duration-150;
  }
  
  .btn-primary {
    @apply btn bg-blue-500 text-white hover:bg-blue-600;
  }
  
  .btn-secondary {
    @apply btn bg-gray-200 text-gray-800 hover:bg-gray-300;
  }
  
  /* 卡片组件 */
  .card {
    @apply p-6 bg-white rounded-xl shadow-md;
  }
  
  /* 表单控件 */
  .input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg
           focus:border-blue-500 focus:ring-2 focus:ring-blue-200;
  }
}

<button class="btn-primary">主要按钮</button>
<button class="btn-secondary">次要按钮</button>
<div class="card">卡片内容</div>
<input class="input" placeholder="输入内容">

components 层的样式可以被 utilities 层覆盖：

<!-- rounded-none 覆盖 .card 中的 rounded-xl -->
<div class="card rounded-none">无圆角卡片</div>

utilities 层

utilities 层用于定义自定义工具类：

@layer utilities {
  /* 隐藏滚动条 */
  .scrollbar-hidden {
    scrollbar-width: none;
  }
  .scrollbar-hidden::-webkit-scrollbar {
    display: none;
  }
  
  /* 文字截断 */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* 安全区域内边距 */
  .p-safe {
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
}

v3 与 v4 的区别

v3 中 @layer 有特殊行为——在 @layer components 或 @layer utilities 中定义的类会被 Tailwind 识别为真正的工具类，自动支持变体。

v4 中这个行为改变了：

/* v3：.btn 自动支持 hover、focus 等变体 */
@layer components {
  .btn {
    @apply px-4 py-2 bg-blue-500;
  }
}
/* HTML: <button class="hover:btn">可以</button> */

/* v4：@layer components 中的类不再自动支持变体 */
@layer components {
  .btn {
    @apply px-4 py-2 bg-blue-500;
  }
}
/* HTML: <button class="hover:btn">不可以</button> */

v4 中要创建支持变体的自定义工具类，使用 @utility：

/* v4 正确做法 */
@utility btn {
  @apply px-4 py-2 bg-blue-500;
}
/* HTML: <button class="hover:btn">可以</button> */

分层优先级

分层的优先级规则：

1. base 层：最低优先级，会被其他层覆盖
2. components 层：中等优先级，会被 utilities 覆盖
3. utilities 层：最高优先级，可以覆盖所有其他样式

@layer base {
  .text-red {
    color: red;
  }
}

@layer components {
  .text-blue {
    color: blue;
  }
}

@layer utilities {
  .text-green {
    color: green;
  }
}

<!-- utilities 优先级最高 -->
<div class="text-red text-blue text-green">绿色</div>

实际项目组织

一个典型的项目样式文件结构：

/* app.css */
@import "tailwindcss";

/* === 主题定义 === */
@theme {
  --font-sans: "Inter", sans-serif;
  --color-brand: oklch(0.65 0.18 250);
  /* ... 更多主题变量 */
}

/* === 基础样式 === */
@layer base {
  body {
    @apply font-sans text-gray-900 bg-white antialiased;
  }
  
  h1, h2, h3 {
    @apply font-bold tracking-tight;
  }
}

/* === 组件样式 === */
@layer components {
  .btn {
    @apply inline-flex items-center justify-center
           px-4 py-2 font-medium rounded-lg
           transition-colors duration-150;
  }
  
  .btn-primary {
    @apply btn bg-brand text-white hover:bg-brand/90;
  }
  
  .card {
    @apply p-6 bg-white rounded-xl shadow-md border border-gray-100;
  }
}

/* === 工具类 === */
@layer utilities {
  .scrollbar-hidden {
    scrollbar-width: none;
  }
  
  .scrollbar-hidden::-webkit-scrollbar {
    display: none;
  }
}

分层系统是管理样式优先级的好工具，但 Tailwind 的核心哲学始终是”优先用工具类”。理解了分层，你才能在需要的时候做出正确选择。