Adding focus to buttons

[eduardonwa]

So I noticed that by default some form elements have a default focus but a button for example, I can't make that to focus when im pressing the alt key, perhaps somebody could tell me how to make those have a lighting ring around the element?

I wish to add ring for 2 buttons but: focus-visible:ring-2 focus-visible:ring-rose-500 is not doing anything.

        <button
            type="submit"
            class="bg-blue-600 hover:bg-blue-500 text-sm text-white p-3 rounded-md h-auto w-34 uppercase focus-visible:ring-2 focus-visible:ring-rose-500"
        >
            Publish
        </button>

It says here that by default the focus state only comes by default for some core plugins: https://tailwindcss.com/docs/hover-focus-and-other-states#focus

I can't see buttons on this list however the docs are applying focus on buttons. Thanks!

[simonswiss]

Hey!

It's a little bit tricky - if you want to use focus-visible with ring utilities, you need to enabled the focus-visible variant for the ringWidth, ringColor, ringOffsetWidth and any ring corePlugin utilities you would apply on this variant.

Here's a little Tailwind Play to demonstrate that:

https://play.tailwindcss.com/7DMhLeoNfu?file=config

In our docs website's config file, we do have under the hood these variants enabled for it to work in the examples 👍

If you're using the new JIT package, this gets extremely simplified since you don't have to enabled any variant for these to work, they are all enabled by default 🎉