tailwind @layer 和 @apply使用介绍

这是 Tailwind CSS 中两个非常核心、经常搭配使用的功能：
@layer 和 @apply。
下面是它们的 作用、区别、使用场景、最佳实践。

---

🧩 一、@layer 是什么？

📘 定义

@layer 是 Tailwind 的一个 分层指令，用于定义属于某个层（layer）的自定义样式。

Tailwind 默认有 3 个层：

1. base → 基础样式（如重置、HTML 标签样式）
2. components → 组件级样式（如按钮、卡片）
3. utilities → 工具类（如 .text-center, .bg-blue-500）

---

📚 用法示例

@layer base {
   
   
  h1 {
   
   
    @apply text-2xl font-bold;
  }
}

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

@layer utilities {
   
   
  .text-shadow {
   
   
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  }