提取组件时的 Tailwind @apply 指令与纯 CSS

Question

如果这属于自以为是的事情，我深表歉意，但我正在尝试确定我是否遗漏了什么，或者这只是另一种方式。

我们目前有自己的 CSS 样式，用于使用 SASS 的常用元素。例如，对于一个按钮，我们有一个基本的“btn”类，并且可以使用 SASS“&-blue”应用差异变体，以在 btn-blue 样式上分层，等等。总的来说，这工作得很好，但是问题（以及为什么我们roll w/tailwind）是你不能解释类中的每一件事，而且我们的很多 UI 都是特定于一个组件的。 Tailwind 在不需要写“style: blah blah”或者想太多的问题来命名类或某些类之间的共同点的上下文中是一种绝对的乐趣。

也就是说，在顺风文档中，他们提到了提取组件，我正在尝试这与我们现在所做的有什么不同。实际上，在这方面，将我们已经拥有的每个基类重新创建为@apply bg-white 等对我们来说实际上似乎更麻烦。只为我们知道的基类/通用类做我们正在做的事情是否可以？应用程序，然后只是使用顺风添加一些附加功能或构建更多自定义用例？我在 SASS 中无法切换到 @apply 时错过了什么？

非常感谢！

Answer 1

何时提取组件以及何时仅使用类取决于您的需求。

您的“btn”是为什么@apply 和提取组件可能很方便的完美示例。如果你的按钮有前。 10个顺风分类然后每次在布局中重复它是不好的做法。解压成 .btn 后就很容易使用了。

但是您问这样做的意义何在，而不仅仅是标准的 CSS/SCSS。这是所有框架的事情。当框架可以使它更短和更干净时，为什么要包含框架并仍然使用纯代码？

代替：

.btn {
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  border-radius: .25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: .5rem;
  padding-bottom: .5rem;

  &.btn-blue {
    background: #2b6cb0;
  }
}

你刚刚：

.btn {
  @apply text-white text-lg font-bold py-2 px-4 rounded;

  &.btn-blue {
    @apply bg-blue-500;
  }
}

或者，如果您在一个地方有蓝色按钮，那么请保持简单：

.btn {
  @apply text-white text-lg font-bold py-2 px-4 rounded;
}

在按钮中：

<button class="btn bg-blue-500">

Tailwind 并非设计为仅与内联 class="xxx yyy zzzz" 一起使用。如果你坚持这样做，代码最终会变得非常混乱。这就是为什么还可以选择使用@apply 或在某些情况下使用theme()。