Add forced-colors variant

[lukewarlow]

Add a variant for the forced-colors media query.

Also add a contrast-custom variant to match custom contrast preferences

Like with #11693 i've only added a variant for forced-colors: active because the forced-colors: none case isn't overly useful.

This has widespread browser support across multiple platforms

[lukewarlow]

It would be useful to also have a variant for @media (prefers-contrast) in a boolean context. But I couldn't think of a good name for it? contrast-specified?

To quote the spec:

it is also common to reduce visual clutter and color complexity in response to both high and low contrast preferences. In that case, it is appropriate to use @media (prefers-contrast) { … } without specifying more or less, to do things like replacing background images with plain colors, turning off decorative gradients, or replacing border images or box shadows with simple solid borders. As prefers-contrast: custom—like prefers-contrast: more or prefers-contrast: less—evaluates to true in a boolean context, such simplifications would also benefit users of forced colors mode, even when their colors of choice do not result in a particularly high or low contrast. This is desirable, as the reduced palette enforced by forced colors mode calls for some visual simplification of the page.

[RobinMalfait]

Hey!

Thanks for the PR. I did drop the contrast-custom from this PR and changed the order of the variants plugin slightly. Apart from this everything looks good.

This will be available in the next release but you can already try it using the insiders version.

[devongovett]

hey @RobinMalfait @lukewarlow! Thanks for adding this. I was trying it out, and wondered if the order of the media queries in the generated CSS should be changed. For example, currently if you have bg-red-400 dark:bg-red-800 forced-colors:bg-black, the dark mode variant wins over forced colors. This is the generated CSS:

.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}

@media (forced-colors: active) {
  .forced-colors\:bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  }
}

@media (prefers-color-scheme: dark) {
  .dark\:bg-red-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(153 27 27 / var(--tw-bg-opacity));
  }
}

Example: https://play.tailwindcss.com/W5uvtnMyhH

I think forced colors should basically always win. Is there a way to have this automatically pushed to the end so we don't need to also add a redundant dark:forced-colors:bg-black class?

[lukewarlow]

@devongovett Forced-colors mode could result in a light theme or a dark theme (and a high or low or custom contrast). So you could end up needing to set a separate class for forced-colors with dark mode than without. Having said that provided the dark:forced comes after normal forced, your change probably makes sense.

But could the same not be said for the contrast variants?

@RobinMalfait I think d620471 is what changed that ordering, was this deliberate or was it just for neatness?

[lukewarlow]

I've made a PR to do this so it's ready to go if the team want to make the change. #12582

Depends on whether we want to be consistent with contrast etc or not I guess.

[RobinMalfait]

Yep you are totally correct. @lukewarlow we moved it because it made more sense to group the related variants together, but this does indeed break the dark mode case. Good catch! Will take a look at your PR tomorrow, thanks 🙏