无法@使用11和Sass应用尾风状态变量类

Question

问题：

我用的是11的尾风和Sass。每当我在.scss文件中使用尾风状态变量类时(例如。.class { @apply sm:flex })它否定整个CSS规则，包括它声明的所有其他类。

我希望能够将@apply (**sm:***，尾风状态变体类(**sm:***， hover:***，**‘组-悬停：’**在.scss文件中。

背景：

我开始我的项目使用11ty与只是尾风。我将能够编写像这样的@apply尾风状态变体类，而不会出现问题：

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

这将定义宽屏幕的display: flex;和小屏幕的flex-direction: column; (我翻转了Tailwind的移动第一种方法，请不要判断:)。

一切都很好，但我希望嵌套和其他一些Sass功能，所以我安装了这个Sass插件。在此之后，我仍然能够在没有:的情况下使用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: './'
  });
};

Answer 1

确保您的Scss在tailwind之后加载。您还可以在index.js检查哪个文件正在导入第一个文件。您是否在同一个scss文件中对这些文件进行了检查：

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