无法使用 Eleventy 和 Sass @apply Tailwind 状态变体类

Question

问题：

\n

I\xe2\x80\x99m 使用 11ty 与 Tailwind 和 Sass。每当我在 .scss 文件中使用 Tailwind 状态变体类（例如.class { @apply sm:flex }）时，它都会否定整个 CSS 规则，包括用它声明的所有其他类。

\n

我希望能够在 .scss 文件中@applyTailwind 状态变体类（sm:*、hover:*、 ）group-hover:*。

\n

---

\n

背景：

\n

我使用 11ty 和 Tailwind 开始了我的项目。I\xe2\x80\x99d 能够@apply毫无问题地编写 Tailwind 状态变体类：

\n

.class {\n  @apply flex sm:flex-col;\n}\n

\n

这将定义display: flex;宽屏幕和flex-direction: column;小屏幕尺寸的定义（我翻转了 Tailwind\xe2\x80\x99s 移动优先方法，请不要\xe2\x80\x99t 判断:)）。

\n

一切工作正常，但我想要嵌套和其他一些 Sass 功能，所以我安装了这个 Sass 插件。之后，我\xe2\x80\x99m 仍然能够@apply在没有 a 的情况下使用 Tailwind 类，:如下所示：

\n

.class {\n  @apply flex p-6 m-6;\n}\n

\n

这 ^^ 按预期输出。但是，当我添加带有 a 的类时:，它会否定整行。

\n

.class {\n  @apply flex p-6 m-6 hover:bg-white;\n}\n

\n

该行不输出任何内容。\xe2\x80\x99t 不会产生构建错误。\xe2\x80\x99t 不会编译任何.class. 所有没有状态变体类的 CSS 声明以及 site\xe2\x80\x99s HTML/JS 的其余部分都会成功输出。

\n

---

\n

在很多情况下，我可以以不同的方式定义事物，如下所示：

\n

.class {\n  @apply flex p-6 m-6; \n\n  &:hover {\n    @apply bg-white;\n  }\n}\n

\n

这个^^效果很好。

\n

我还可以直接在标记中使用 Tailwind 类：

\n

<div class=\xe2\x80\x9cflex p-6 m-6 hover:bg-white\xe2\x80\x9d></div>\n

\n

虽然我可以在这两种技术上取得很大的进展，但仍然有一些地方对于@apply.scss 文件中的状态变体来说\xe2\x80\x99d 非常好。

\n

也许我配置的 Sass 插件不正确？JS 不是我的强项。这里\xe2\x80\x99是我的文件的相关位eleventy.js：

\n

const pluginTailwind = require(\'eleventy-plugin-tailwindcss\');\nconst pluginSass = require("eleventy-plugin-sass");\n\nmodule.exports = (config) => {\n  config.addPlugin(pluginTailwind, {\n    src: \'src/assets/css/*\'\n  });\n  config.addPlugin(pluginSass, {\n    outputDir: \'./\'\n  });\n};\n

\n

Answer 1

确保您的Scss加载时间为tailwind. 您还可以在 处检查第一个导入的文件index.js。您是否通过在同一个 scss 文件中粘贴这些来进行检查：

@tailwind base;
@tailwind components;
@tailwind utilities;