Tailwind @layer 指令的目的是什么？

Question

我想为我的 UI 创建一些自定义样式，并在 Tailwind 官方文档中描述了 2 个选项来完成它。

\n

\n
1. @apply -使用 @apply 将任何现有实用程序类内联到您自己的自定义 CSS 中。
\n
2. @layer -使用 @layer 指令告诉 Tailwind 一组自定义样式属于哪个 \xe2\x80\x9cbucket\xe2\x80\x9d。
\n

\n

到目前为止，我了解到@apply只是创建一个自定义样式类并将其添加到 Tailwind 系统中。这正是我所需要的，而且很好，但我也想知道@layer指令。

\n根据描述，它向顺风布局系统添加了一桶自定义样式，但我无法理解这一举​​动给我们带来了什么好处。

\n

如果我只使用@apply就这样呢？
会损害性能吗？
\n所以我只是想了解在什么情况下应该使用@layer

\n

感谢您的帮助 | 信息！

\n附言抱歉，如果我的问题很愚蠢。如果是这样，我深表歉意。我是 Tailwind 的新人。

\n

Answer 1

实际上，您可以同时自由地使用两者（或都不使用）——没有任何限制。您甚至可以不使用@tailwind指令，但您将失去使用 Tailwind 的全部意义。no -@apply指令不会将自定义样式添加到 Tailwind 的系统中（它只是将实用程序类转换为 CSS 属性，并起到 CSS 别名的作用），同时@layer将样式添加到 Tailwind 中。

\n

Tailwind 本身描述的好处很少

\n

\n

\n
1. Tailwind 会自动将 @layer 指令中的任何 CSS 移动到与相应的 @tailwind 规则相同的位置，因此您\xe2\x80\x99 不必担心以特定顺序编写 CSS 以避免特殊性问题。
\n

\n

\n

Tailwind 将所有类“分离”为三类 - base（任何基本样式，例如标题、段落、图像 - 它被修改为 normalize.css）、utilities（单属性类 - 例如text-sm仅响应文本大小）和components（多个 CSS 属性，例如按钮、容器等）。然而这些定义之间的界限相当模糊

\n

假设我们有这个 CSS 文件

\n

@tailwind base;\n@tailwind utilities;\n

\n

在这里，您可以使用@tailwind指令注入这些样式 -@tailwind base将注入所有 Tailwind 的基本样式、通过@layer base配置文件或插件注册的任何样式。

\n

如果你为h1标签定义了一个又一个的基本样式

\n

@layer utilities {\n  h1 {\n    @apply text-7xl;\n  }\n}\n\n@layer base {\n  h1 {\n    @apply text-2xl;\n  }\n}\n

\n

尽管text-2xl稍后被调用，并且您希望它会覆盖，text-7xl但实际上您会看到相反的情况 - 那是因为在编译文件中utilities之后注入。base更改订单

\n

@tailwind utilities;\n@tailwind base;\n

\n

现在h1将按text-2xl实用程序设计。它可能有助于跟踪放置在不同源文件中的高优先级 CSS 选择器

\n

\n

\n
2. 添加到图层的任何自定义 CSS 仅当该 CSS 实际在 HTML 中使用时才会包含在最终版本中，就像默认情况下内置于 Tailwind 的所有类一样。
\n

\n

\n

让我们注册两个按钮

\n

@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n.btn-blue {\n    @apply px-4 py-2 inline-block bg-blue-500;\n}\n\n@layer components {\n   .btn-red {\n        @apply px-4 py-2 inline-block bg-red-500;\n    } \n}\n

\n

HTML 文件将是（我们只使用其中之一）

\n

<button type="button" class="btn-blue">\n    Button\n</button>\n

\n

如果编译 CSS，您将看到.btn-blue最终 CSS 中仅编译了类。这意味着通过 或 config 注册的任何未使用的组件都@tailwind components将从最终构建中清除。但是如果你将 HTML 更改为

\n

<button type="button" class="btn-red">\n    Button\n</button>\n

\n

您将在编译文件中看到 和.btn-blue。.btn-red因此，在这种情况下，它的.btn-blue行为就像常规 CSS - 尽管没有使用它，但它并没有被清除。因此，回答“它会损害性能吗”——在某种程度上是的，因为 using@layer指令会阻止未使用的样式被编译到捆绑包中。它对于“从一个项目到另一个项目”的可重用组件很有用，假设您有输入、按钮、选择组件等，但并不是每个项目都会使用它们

\n

\n

\n
3. 将任何自定义 CSS 包装在 @layer 指令中还可以使用具有这些规则的修饰符，例如悬停：和焦点：或响应式修饰符，例如 md：和 lg：
\n

\n

\n

这仅仅意味着您可以使用具有变体的组件类，例如hover:btn-red-px-4 py-2 inline-block bg-red-500现在所有内容都将仅在悬停时应用。

\n

为了有意义，让我们稍微改变一下 HTML

\n

<button type="button" class="hidden sm:btn-red">\n    Button\n</button>\n

\n

现在您可以看到在移动设备上按钮将被隐藏，并且仅在 sm-breakpoint 按钮样式之后才会应用。你不能做同样的事sm:btn-blue- 因为它没有注册为组件，而 Tailwind 对此一无所知

\n

这同样适用于本机 Tailwind 组件或任何

\n

<div class="sm:container">\n    I will behave as container only after 640px screen width\n</div>  \n

\n

另一种使用它的方法 - 覆盖定义的属性。返回红色按钮你会看到它有px-4属性。但你希望你能改变它

\n

<button type="button" class="btn-red px-8">\n    Button (with px-8 being applied)\n</button>\n\n<button type="button" class="btn-blue px-8">\n    Button (px-8 being ignored)\n</button>\n

\n

使用变体几乎没有任何限制，@apply所以hidden sm:btn-red您可以简单地使用btn-red并将 CSS 更改为

\n

@layer components {\n   .btn-red {\n        @apply px-4 py-2 hidden sm:inline-block bg-red-500;\n    }\n}\n

\n

PS 在所有示例中，我都使用了@apply指令 - 但是您可以编写任何 CSS，甚至混合它们

\n

下一部分是基于意见的，可以跳过

\n

尽管这是一个很好的功能，但我个人几乎从不使用它。我从来没有遇到过选择器顺序或将自定义组件与变体堆叠的问题。也许hidden sm:btn-blue可能具有更大的可读性潜力 - 就像您确定它隐藏在移动设备上一样，只有在某个断点之后，这个地方才会有按钮

\n

最好可以清除未使用的样式。然而，在某些情况下，您可能不希望出现这种行为 - 当您的类来自外部 API 或后端并且您仍然希望它们在最终版本中进行编译时。这样要么将其列入安全名单@layer，要么根本不使用

\n

另外，如果我使用预定义的 UI-kit 开始一个新项目，我总是确定我会使用.btn-blue类 - 如果不是 - 为什么我应该首先创建这样的样式？

\n

因此，是否使用它取决于您和您的项目

\n