Introduction of disabling/ignoring variants

[rozsazoltan]

TL;DR: New @disable-variant or @ignore-variant directive.

Problem

Currently, there's no proper way to revoke built-in variants. For example, a light: variant provided by an external plugin cannot be ignored, so the styles it introduces become part of the output.css, even if I try to make the variant rule ignored using @custom-variant, e.g., :not(*).

The same issue occurs with the built-in dark variant if I personally don't need it. For instance, I might want to ship the smallest possible CSS, so I don't need a separate dark mode. Even if I don't use the dark: variant myself, UI packages do, which means dark variant references end up in the output.css - even if I manually disable the dark variant.

input.css

@import "tailwindcss";

@custom-variant dark (&:not(*));

index.html

<div class="bg-white dark:bg-black">Hello World</div>

And output.css will not ignore dark:bg-black; it will be included in output.css even though I don't want it.

Idea

There should be an option, either inside @custom-variant, to disable specific variants.

Or a directive like @disable-variant (or maybe @ignore-variant?), which, regardless of any previous instructions, permanently prevents any styles associated with that variant from being included in the output.css if it appears even once.
input.css

  @import "tailwindcss";
  
- @custom-variant dark (&:not(*));
+ @ignore-variant dark;

index.html

<div class="bg-white dark:bg-black">Hello World</div>

And output.css would only include bg-white; the dark:bg-black is ignored due to the disable.