Tailwind + SASS 不在 Codepen 中呈现样式
Tailwind + SASS not rendering styles in 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 - 它根本无法即时生成您的 class
文档says
Before using the CDN build, please note that many of the features that make Tailwind CSS great are not available without incorporating Tailwind into your build process.
- 您无法自定义 Tailwind 的默认主题
- 您不能使用
@apply、@variants 等任何指令
- 您无法启用其他变体，例如
group-focus
- 不能安装第三方插件
- 你不能 tree-shake 未使用的样式
我正在 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 - 它根本无法即时生成您的 class
文档says
Before using the CDN build, please note that many of the features that make Tailwind CSS great are not available without incorporating Tailwind into your build process.
- 您无法自定义 Tailwind 的默认主题
- 您不能使用
@apply、@variants等任何指令 - 您无法启用其他变体，例如
group-focus - 不能安装第三方插件
- 你不能 tree-shake 未使用的样式