Tailwind + SASS 没有在 Codepen 中渲染样式

问题描述

我正在尝试使用 Tailwind 和 this video suggests,您可以像这样使用 Sass 来避免 Tailwind 类的重复:

HTML

<button class=but>Button</button>

SASS

.but {
    @apply bg-green-400 p-5 rounded-lg m-5 text-white
}

...但这对我不起作用;样式没有被渲染,Codepen 的 CSS 编辑器抱怨需要一个新行。 Here's my pen - 它启用了 Tailwind 和 Sass。

我做错了什么?

解决方法

您使用的 CDN Tailwind 无法支持许多功能 @apply - 它根本无法即时生成您的类

文档says

在使用 CDN 构建之前,请注意,如果不将 Tailwind 纳入您的构建过程,就无法使用许多使 Tailwind CSS 变得出色的功能。

  • 您无法自定义 Tailwind 的默认主题
  • 您不能使用任何指令,例如 @apply@variants 等。
  • 您无法启用其他变体,例如 group-focus
  • 您不能安装第三方插件
  • 你不能摇晃未使用的样式