WebPack / 复制 Tailwind CSS 的 @apply 指令以远离 SASS 中的 @extend 的方法

Question

我正在研究一个介于 ITCSS 和 Tailwind 之间的内部 CSS“框架”/方法。

我们使用了很多实用程序类，但有时实际的类名太长，我们希望将其提取到自己的类中。

这是一个伪示例：

<button class="p-2 bg-primary elevate-1">Click Me</button

我想做什么：

.btn {
    @extend .p-2;
    @extend .bg-primary;
    @extend .elevate-1;
}

我知道应该避免使用@extend，所以不希望使用该方法。

是否有一个 webpack 插件可以让您使用 @extend 而不会出现问题？

或者，有谁知道 Adam Wathan 如何创建 @apply 指令： https ://tailwindcss.com/docs/extracting-components/#extracting-utility-patterns-with-apply

从文档中获取，他可以这样做：

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

这是他写的 SASS 函数吗，如果有的话，有没有关于如何创建类似的信息？

谢谢。

Answer 1

Tailwind 使用PostCSS进行 CSS 转换。

请参阅CSS 中的 @apply 是什么？ 了解更多背景信息。