在创建组件时使用 @apply (React.tailwind)

Question

在什么场景下推荐使用@apply而不是将样式提取到组件中？

@apply 可以用作 sass 中@mixin 的替代品吗？如果不是，在使用 tailwindcss 时我应该使用什么来替代 @mixin？

Answer 1

一般来说，跨多个组件应用相同的样式时最好使用@apply。

我发现最好在常用元素（例如 h1-6 和 p 标签）上使用 @apply。我还喜欢在我的应用程序中创建通用组件，例如使用共享“表面”的卡片或按钮。您将受益于使用 @apply 创建样式，然后在这些组件的 class 名称中引用它们，因为您可能希望具有通用样式，例如 dark/light 模式下的背景颜色、悬停不透明度、响应式大小调整，等...

您不必使用@apply，它在性能方面没有真正的区别。但是，tailwindcss 是一个实用程序框架，因此将实用程序组合成一个 class 确实违背了库的目的。如果您重复自己的话，只会让您的开发体验更好。

Answer 2

documentation 建议仅将 @apply 用于高度可重用的小东西，如按钮、输入、headers 等。否则你将失去 tailwind 给你的优势。

对于较大的东西建议使用组件、循环等

附带说明一下，如果您使用 @apply 的次数超过了必要的次数，您将增加 tailwind 的大小，因此您将失去 tailwind 拥有的最大优势之一。

所以你必须在这两者之间找到平衡。

至于mixin。你唯一能做的就是以下在你的 app.css -tailwind 文件中 -

@layer components {
  .foo {
     @apply mb-2 text-2xl font-bold;
  }

  .bar {
    @apply .foo;
   }
}

在创建组件时使用 @apply (React.tailwind)

Using @apply over creating a component (React. tailwind)

javascript

css

sass

reactjs

tailwind-css