Can'；t@apply Tailwind状态变量类使用Eleventy和Sass 问题:

我在用11ty搭配顺风和Sass。每当我在.scss文件中使用Tailwind state variant类（例如，

.class{@apply sm:flex}

）时，它就会否定整个CSS规则，包括用它声明的所有其他类

我希望能够在.scss文件中应用

@顺风状态变量类（
sm:
，
悬停：
，
组悬停：
。


背景：
我使用11ty开始了我的项目，只是使用了Tailwind。我可以像这样编写
@apply
Tailwind状态变量类，而不会出现问题：

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

这将为宽屏幕定义
display:flex；
，为小屏幕定义
flex direction:column；
（我翻转了Tailwind的移动优先方法，请不要判断：））

一切都很好，但我想要嵌套和其他一些Sass功能，所以我安装了。在这之后，我仍然能够
@应用
顺风类，而不需要
：
，如下所示：

.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>

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: './'
  });
};