不能使用 Eleventy 和 Sass 来@apply Tailwind 状态变体类 问题：背景：

如何解决不能使用 Eleventy 和 Sass 来@apply Tailwind 状态变体类 问题：背景：

问题：

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

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

---

背景：

我使用 11ty 和 Tailwind 开始了我的项目。我可以毫无问题地编写 @apply Tailwind 状态变体类：

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

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

一切正常，但我想要嵌套和其他一些 Sass 功能，所以我安装了 this Sass plugin。之后，我仍然可以像这样 @apply 没有 : 的 Tailwind 类：

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

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

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

这一行什么都不输出。不会产生构建错误。不为 .class 编译任何东西。所有没有状态变量类的 CSS 声明都会成功输出，以及网站的其余 HTML/JS。

---

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

.class {
  @apply flex p-6 m-6; 

  &:hover {
    @apply bg-white;
  }
}

这个 ^^ 工作得很好。

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

<div class=“flex p-6 m-6 hover:bg-white”></div>

虽然我可以通过这两种技术取得很大进展，但仍有一些地方非常适合@apply .scss 文件中的状态变体。

也许我的 Sass 插件配置不当？ JS 不是我的强项。这是我的 eleventy.js 文件的相关部分：

const pluginTailwind = require('eleventy-plugin-tailwindcss');
const pluginSass = require("eleventy-plugin-sass");

module.exports = (config) => {
  config.addplugin(pluginTailwind,{
    src: 'src/assets/css/*'
  });
  config.addplugin(pluginSass,{
    outputDir: './'
  });
};