Not recognizing selector:not(.class-name) unless class-name exists in content

[rjschie]

I'm not sure that this is a bug per-se, so I wanted to bring it up in a discussion first. If you have a rule in a layer, or plugin, that includes a :not(.class-name), it will not add it to the output if class-name is not found in the content. Once you add class-name it will recognize it, add it, and continue keeping it throughout that build (but once you stop the watcher and re-start it will revert back).

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

@layer base {
  div:not(.class-name) {
    background-color: magenta;
  }
}

<div class="p-4"> <!-- does not have magenta bg -->
  Some content
</div>

You can see an example here: https://play.tailwindcss.com/fSaAQLAJ2i

In that playground, you'll see that the div's background is not magenta as you might expect, but if you add class-name to the class attribute, and then remove it, it will turn magenta.

Adding safelist: ['class-name'] to the config will work around this issue, but is this unintuitive? Is it a bug?

[adamwathan]

Ah interesting and good catch — definitely would say this is a bug, we should generate that CSS even if the class in not is never used. Will convert to an issue, thanks!