tailwindcss: outline-none doesn't work on button with focus in chrome

You only need focus:outline-none for all browsers:

<button class="focus:outline-none">click-me</button>

For forms I had to use focus:ring-0 to get it to work

class = "border-transparent focus:border-transparent focus:ring-0"

worked for me

@desaintflorent I faced the same issue than you. The missing piece is enable “focus” as a variant for outline in tailwind.config.js:

module.exports = {
  ....
  variants: {
    outline: ["focus"],
  },
  ...
};

Then you need to add outline on focus:

<button class="focus:outline-none">click-me</button>

Hope it helps!

focus:ring-transparent did it for me on an input

Hi ! I have already tried a lots of way but achieved only one. <button mat-menu-item style="outline: none"> Simply 😄 </button> I don’t like, when I write in style, but if sometimes no way, no problem…

hi everyone, i read the docs and i am trying to disable outlines for button:focus. because i don´t know how to do this specific i followed the docs and added:

module.exports = {
    corePlugins: {
      // ...
     outline: false,
    }
  }

this, but still… the outline is there… would be happy if someone could help me here. thank you!

Same issue. Adding focus:ring-0 or focus:ring-transparent solve the problem of just focus:outline-none

@neural9 @apply will not work for pseudo-class.

Do this instead:

.btn {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded
}

.btn:focus {
  @apply outline-none
}

You only need focus:outline-none for all browsers:

<button class="focus:outline-none">click-me</button>

This doesn’t work for me in Chrome, I have to add both outline-none and focus:outline-none to remove the outline

As of September 2020 the only way I could get this outline to go away was adding shadow-none

It looks like browsers now use box-shadow for the outline

class = "border-transparent focus:border-transparent focus:ring-0"

worked for me

Thanks, @TanZng this is working for me.

focus:outline-none works

but why does tailwind add this outline to buttons by default? do we really have to add focus:outline-none to every button?

is there some way to remove outlines by default?

Tailwind doesn’t add the outline, browsers do. You can remove the outline for all elements if you like by adding a custom base style in your CSS that removes the focus outline but that’s very bad for accessibility so we will never do that by default.

@michabbb try this https://github.com/tailwindlabs/tailwindcss/discussions/2949

Same issue. Adding focus:ring-0 or focus:ring-transparent solve the problem of just focus:outline-none

If anything, this showed me that I need to look at all my classes, such a large application where I had to do this on each input that had the outline disabled, personal failure.

Yeah the outline: false corePlugin doesn’t appear to work for buttons.

I’m trying to use Tailwind with Angular Material and I can’t seem to get rid of the outlines that it adds to Angular components. Angular Material already has it’s own outlines, and I don’t want Tailwind to automatically add any. Is there any way to disable them globally? Adding focus:ring-0 seems to work for forms, but I don’t want to add these classes for every form field and button of my app.