Tailwind CSS tree-shaking 是否可以与 *.scss 模块中的 @apply 规则一起使用？

Question

我的理解是，Tailwind CSS 会进行 tree-shake，只提供与我正在使用的类捆绑的 CSS。所以在下面的例子中：

<div class="flex flex-row">
</div>

...最终的 Tailwind 捆绑包仅包括：

.flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}

但是，我想知道

@apply

规则是否同样有效？所以如果我有：

import styles from 'styles.scss';

export default function Example() {
  return (
    <div className={ styles.flex_row }>
    </div>
  )
}

还有...

.flex_row {
  @apply flex flex-row;
}

这仍然会为我提供使用的 Tailwind 类的最小捆绑包吗？

我已经用 Google 搜索并阅读了 Tailwind 文档，但我无法找到任何内容。我会看看是否可以查看输出的捆绑包，看看它是否在那里很明显......

Answer 1

考虑在

@layer base/components/utilities

规则中定义规则，并确保 Tailwind 在 Sass 编译后处理生成的 CSS 文件。这使得 CSS 规则对于 Tailwind 来说“已知”，因此 Tailwind 将对其进行处理和“tree-shake”。

顺便说一句，您可能还希望按照 Tailwind 的创建者 Adam Wathan 的建议完全避免

@apply

：