outline-hidden only applies transparent outline when forced-colors is active?

[benwilliams140]

What version of Tailwind CSS are you using?

4.0.9

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

Vite 6.0.11

What version of Node.js are you using?

22.13.1

What browser are you using?

Chromium, Firefox, Safari

What operating system are you using?

MacOS

Reproduction URL

https://play.tailwindcss.com/SOQPkOEDC9

Describe your issue

I'm currently upgrading a project from v3 to v4. The upgrade guide states that outline-none was renamed to outline-hidden, although this is only true when forced-colors media feature is active. Curious why this change was made, and if there's another utility class I could use to have the same behaviour as v3.

[philipp-spiess]

Hey! outline-hidden sets the outline-style to none even in non-forced-colors mode. In your reproduction, I don't see any outlines when I focus the button which I think is expected. What exactly are you seeing?

Curious why this change was made

We thought it was unexpected that outline-none would not set the outline-style to none before. In v4, outline-none also exists and does exactly that. The outline-hidden utility should be preferred for accessibility reasons in forced-colors mode, though!

[philipp-spiess]

I did notice that outline-hidden does not work well in combination with other outline utilities since it only sets outline-style and not --tw-outline-style (like outline-none would). Since your repro only contains outline-hidden, I'm not sure if this is part of the issue you're referring to, though.

[benwilliams140]

Ah yes, that's what I'm referring to. In v3 I was able to set all my outline styles alongside outline-none (now outline-hidden), and override the color on focus-visible so that it only appears when necessary (here's a repro with a better example: https://play.tailwindcss.com/uQbBpzXNl4).

I'm realizing now though that this was probably an incorrect approach from the get-go and I should only be setting the outline style on focus-visible

[philipp-spiess]

Gotcha, yeah that was indeed an oversight, I've added it to main now and it'll be fixed in the next patch release. Thanks for the report!