[v4] :focus-visible no longer overrides default outline for some reason

[HiggsWRX]

What version of Tailwind CSS are you using?

4.0.0-beta.2

What browser are you using?

Checked on firefox, chrome, safari

What operating system are you using?

macOS

Reproduction URL

Just try to focus buttons

Broken on v4:

https://play.tailwindcss.com/x9buJChfyQ

Working on v3, was working on v4 before beta 2 (or 1?)
https://play.tailwindcss.com/GlVJmoYF6H

Describe your issue

One common pattern used was to set outline-none as a base style and then just override it when focused with a focus-visible:outline-red-500 for example. The choice between outline and ring is a discussion for another time but shadcn-ui for example uses this pattern a lot.

After the latest betas, this no longer works as you can check on the repro links.

For it to work, instead of outline-none as base we need to focus-visible:outline. Don't know if this is known and intended or a side effect from another change that went unnoticed.

PS: seems like this is broken in safari no matter the version

[wongjn]

This is a known breaking change between v3 to v4:

outline-none to outline-hidden

In v3, the outline-none utility was actually a complex class that didn't just set outline-style: none:

/* v3 */
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

What it really did was add an invisible 2px outline that would still show up in forced colors mode for > accessibility reasons.

We've simplified this in v4.0 and now outline-none just sets outline-style: none like you'd expect:

/* v4 */
.outline-none {
  outline-style: none;
}

We've added a new outline-hidden utility that does what outline-none did in v3, since it's still a very useful feature.

To update your project for this change, replace any use of outline-none with outline-hidden, unless you really do want outline-style: none:

- <input class="focus:outline-none">
+ <input class="focus:outline-hidden">

Applied to your v4 example: https://play.tailwindcss.com/A5izOk3zeG