Can't @apply Tailwind state variant classes using Eleventy and Sass

Problem:

I’m using 11ty with Tailwind and Sass. Whenever I use a Tailwind state variant class in a .scss file (eg. .class { @apply sm:flex }) it negates the entire CSS rule, including all other classes declared with it.

I'd love to be able to @apply Tailwind state variant classes (sm:*, hover:*, group-hover:* in .scss files.

Background:

I started my project using 11ty with just Tailwind. I’d be able to write @apply Tailwind state variant classes like this without issue:

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

This would define define display: flex; for wide screens and flex-direction: column; for small screens sizes (I flipped Tailwind’s mobile first approach, please don’t judge :) ).

Everything was working fine, but I wanted nesting and few other Sass features, so I installed this Sass plugin. Afterward this, I’m still able to @apply Tailwind classes without a : in them like so:

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

This ^^ outputs as expected. However when I add a class with a :, it negates the entire line.

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

This line outputs nothing. Doesn’t produce a build error. Doesn’t compile anything for .class. All CSS declarations without a state variant class are successfully output, along with the rest of the site’s HTML/JS.

In many cases I can define things differently, like so:

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

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

This ^^ works just fine.

I can also use Tailwind classes directly in markup:

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

While I can get really far with these two techniques, there are still a few places where it’d be really nice to @apply a state variant in a .scss file.

Maybe I configured the Sass plugin improperly? JS is not my strong suit. Here’s the relevant bits of my eleventy.js file:

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