5

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: './'
  });
};
Ted Goas
  • 7,051
  • 1
  • 35
  • 42

1 Answers1

0

Make Sure Your Scss is loading after tailwind. you can also check which file is importing 1st at index.js. Did you check by pesting these at the same scss file:

@tailwind base;
@tailwind components;
@tailwind utilities;
Ridwan Malik
  • 566
  • 4
  • 5
  • 1
    Thanks for the reply. This is how I'm currently doing it: Tailwind.css first followed by custom css. – Ted Goas Oct 17 '22 at 14:47
  • Welcome, If you found my answer useful, you can accept it as the best answer or give it a plus. It will be so helpful for me. – Ridwan Malik Nov 30 '22 at 05:08