Button Focus Indication

[shaunnbarron]

Description

In v3, we seem to have lost any focus indication on Buttons. This looks intentional as I see focus:outline-hidden on the base. For a11y and good keyboard navigation, it's best practice to have a visual indication of focus: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#discernibleandpredictablekeyboardfocus

It seems we've taken a step backward from v2 in this regard. Was this intentional? Is the intent for users to add their own focus-visible:* classes via app config?

[NilsEvers]

I've also noticed that focus-visible is not working properly for buttons, and I believe it's due to a change in Tailwind 4.

The following code works in Tailwind 3 but not in Tailwind 4:

<button class="focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500">Test</button>

You can compare the behaviour here:

• TW 3 demo
• TW 4 demo

Issue

When the button is focused, both focus: and focus-visible: variants are applied simultaneously. This causes focus:outline-none (or focus:outline-hidden) to remove or hide the outline.

Solution:

To make it work in Tailwind 4, we need to explicitly add focus-visible:outline-solid as well.

[benjamincanac]

Indeed, thanks for the report! It seems something has changed in the outline-hidden class in recent patches of Tailwind CSS v4 (maybe tailwindlabs/tailwindcss#16943). This is now fixed using focus:outline-none where it is needed.

[NilsEvers]

@benjamincanac in my experience it does not work with focus:outline-none without setting focus-visible:outline-solid, see my examples above.

[benjamincanac]

Doesn't it? 🤔 https://ui.nuxt.com/components/button

https://play.tailwindcss.com/SQEXmtS2zz

[NilsEvers]

It works on the website because there is no focus:outline-none :)
And it doesn't work on your second link.

[benjamincanac]

Yes, I've removed the focus:outline-none on the solid variant to only use it on variants that use a ring on focus. Check out my commits for more details: c231fe5