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