tailwindcss @apply 和 @layer 有什么区别

在 Tailwind CSS 中，@apply 和 @layer 是两个不同的指令，它们各自有不同的用途和功能。以下是它们的区别和使用方法：

@apply 指令

@apply 指令用于将一组现有的 Tailwind CSS 工具类应用到一个自定义的 CSS 类中。这对于简化和复用复杂的样式非常有用。

示例

/* 定义一个自定义按钮样式 */
.btn-primary {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

在 HTML 中使用：

<button class="btn-primary">
  Click me
</button>

用途

• 简化复杂的样式定义
• 复用常用的样式组合
• 保持代码的可读性和维护性

@layer 指令

@layer 指令用于将自定义的 CSS 样式归类到 Tailwind CSS 的特定层中。Tailwind CSS 有三个主要的层：base、components 和 utilities。

示例

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

用途

• 组织和管理自定义样式
• 确保样式的声明顺序，以避免特异性问题
• 通过层次结构确保自定义样式与 Tailwind CSS 的默认样式一致

层次结构

• base：用于重置规则或应用于基本 HTML 元素的默认样式。
• components：用于基于类的样式，这些样式可以被 utilities 层的样式覆盖。
• utilities：用于小型的、单一用途的类，这些类应始终优先于其他样式。

示例代码

@tailwind base;
@tailwind components;
@tailwind utilities;

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

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

@layer utilities {
  .filter-none {
    filter: none;
  }
}

工作原理

@layer 指令会自动将 CSS 移动到与相应的 @tailwind 规则相同的位置，因此你不必担心编写 CSS 的顺序问题。任何添加到层中的自定义 CSS 只有在 HTML 中实际使用时才会包含在最终的构建中，就像 Tailwind 默认的类一样。

总结

• @apply 用于将 Tailwind 的工具类应用到自定义的 CSS 类中，简化和复用样式。
• @layer 用于将自定义样式归类到 Tailwind 的特定层中，确保样式的声明顺序和组织性。

通过结合使用这两个指令，你可以在 Tailwind CSS 项目中更高效地管理和复用样式。

Citations:
[1] https://tailwindcss.com/docs/functions-and-directives
[2] https://code.pieces.app/blog/tailwind-apply-css-replacing-complex-classes
[3] https://www.youtube.com/watch?v=JkWS-S51s-U
[4] https://bloggie.io/%40kinopyo/organize-your-css-in-the-tailwind-style-with-layer-directive
[5] https://github.com/tailwindlabs/tailwindcss/discussions/5509