时间戳

首页 > 解决方案 > Tailwind + SASS 未在 Codepen 中呈现样式

sass - Tailwind + SASS 未在 Codepen 中呈现样式

问题描述

我在 Tailwind 中玩耍，这个视频 建议您可以通过使用 Sass 来避免重复 Tailwind 类，如下所示：

HTML

<button class=but>Button</button>

SASS

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

...但这对我不起作用；样式没有被渲染，并且 Codepen 的 CSS 编辑器抱怨需要一个新行。这是我的钢笔——它启用了 Tailwind 和 Sass。

我究竟做错了什么？

标签： sasstailwind-csscodepen

解决方案

您正在使用 CDN Tailwind，它不支持包含的许多功能@apply- 它根本无法即时生成您的课程

文档说

在使用 CDN 构建之前，请注意，如果不将 Tailwind 整合到您的构建过程中，许多使 Tailwind CSS 变得出色的功能将无法使用。

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

推荐阅读