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

Posted 2023-03-06

【中文标题】提取组件时的 Tailwind @apply 指令与纯 CSS

【英文标题】：Tailwind @apply directive vs plain CSS when extracting components

【发布时间】：2020-08-17 20:55:44

【问题描述】：

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

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

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

非常感谢！

【参考方案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()。

【讨论】：

如果您在 css 文件中使用 apply，您可以稍后使用 config.js 文件调整它们。

感谢您的澄清。我想我在问，使用 @apply 指令和实际上拥有原始的 SASS/CSS 有什么区别。从您的示例看来，您似乎在用文本白色换颜色：#fffff。它仍然充当“基础”样式，我总是可以删除填充等，并使用顺风进行调整。基本上我想知道我是否通过将 SASS 翻译为“@apply”而遗漏了什么。实际上，如果我正在编辑 CSS 文件，我发现编写带有后处理器的 SASS 会容易得多。 Tailwind 当然非常适合标记内的小调整。

我真的不明白你所说的“将 SASS 翻译成 @apply”是什么意思，因为我认为 SASS 和 Tailwind 是很好的组合，你应该同时使用它们。