JIT removes classes that are used when the selector is combined with a class that isn't used

What version of Tailwind CSS are you using?

2.2.4

What build tool (or framework if it abstracts the build tool) are you using?

N/A

What version of Node.js are you using?

N/A

What browser are you using?

N/A

What operating system are you using?

N/A

Reproduction repository

https://play.tailwindcss.com/g8MOeRe8bW?file=css

Describe your issue

If you have:

@layer base {
  .works, .oh-no {
    color: red;
  }
}

and you do:

<div class="works">Hello</div>

The text will not be red. JIT needs to also find oh-no for the .works, .oh-no { ... } selector to work.

Don’t know if this is by design or not but it threw me off because if you don’t use JIT and just use Purge it still works.

I figured I’d open an issue to discuss.

[RobinMalfait]

Hey! Thank you for your bug report! Much appreciated! 🙏

Good that you included a reproduction repo, because the example you shared in the description does work: https://play.tailwindcss.com/aXTe2gAlX6?file=css

The issue here is that we extract class candidates only. So if you are using :root (your issue) or [attributeName] (@mgibas’ issue) or other selectors that are not related to classes, then we don’t match them and thus not generate them.

I’ll see if I can come up with a nice fix here, thanks!

[adamwathan]

This is fixed and can be tested in the insiders build if you want to play with it now 👍🏻

npm i -D tailwindcss@insiders

Will be in v3, and likely not backported to v2 since it’s a JIT-only thing.