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

[desaintflorent]

Hi,

First of all, a big thank's for your work on Tailwindcss, it make coding css so cool again !

Maybe it's not a bug and you thought about this already, but it seems strange that outline-none doesn't set outline-none on focus too, on button element.
I noticed that only on Chrome and only on buttons. If I want to remove outline on focus, I need to do :

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

If not I see a big blue outline when the button is in Focus state.

It seems that's its coming from normalize.css with :

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

If I add outline: none; manually it's working too.

Is that a normal behaviour ?

[adamwathan]

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

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

[aohua]

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

[adamwathan]

Please share a JSFiddle or similar that demonstrates the problem. It does work in Chrome as demonstrated here:

https://jsfiddle.net/4mq2csa3/

[soorajvnair]

@adamwathan @desaintflorent @AOHUA I'm also facing the same issue on my end and in my case, no matter what i add, the outline remains. I traced this back to the preflight styles. If i disable preflight, I'm good however with the preflight styles, the issue comes back. Hope that helps.

[adamwathan]

Can you share a GitHub project that reproduces the issue?

[neural9]

It does work to remove the focus outline. Are you using extensions and using focus:outline-none in a separate css file?

e.g.

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

This won't work. The focus needs to be in the HTML page itself on every button.

[ThomOrlo]

@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
}

[neural9]

Brilliant - thank you

[Manubi]

Unfortunately it's wrong in the docs.

focus:outline-none works in next.js

https://tailwindcss.com/docs/outline/

[estevanmaito]

@Manubi outline isn't only applied to focus.

You can apply an outline to almost everything, and this utility removes it.

Take a look at the first demo: https://developer.mozilla.org/en-US/docs/Web/CSS/outline

[ivanbtrujillo]

@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!

[danielidt]

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?

[vesper8]

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

[adamwathan]

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.

[adamwathan]

@vesper8 Hmm I’m not sure that’s true, outline still controls the focus outline in every browser I’ve tried. Do you have a reproduction?

[vesper8]

@adamwathan don't really have something I can share quickly.. I just know that for me the tw-outline-none was doing nothing and only once I added tw-shadow-none did the blue outline go away on Chrome desktop.

It might have something to do with all these other css files I include

@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~bootstrap-vue/dist/bootstrap-vue.css';
@import '~@fortawesome/fontawesome-free/css/all.min.css';
@import '~sweetalert2/dist/sweetalert2.min.css';
@import '~vue-swipe-actions/dist/vue-swipe-actions.min.css';

[adamwathan]

Sounds like you were undoing the blue shadow added by Bootstrap, not by the browser. Chrome doesn't add a blue box shadow, it adds a very dark thick focus ring that looks like this:

[vesper8]

Ahh makes sense.. thanks for clarifying!

I found my solution on a StackOverflow thread about this problem and someone (falsely) claimed that browsers were now using box-shadow for outlines.. I guess he must have been having the same issue I was with Bootstrap

[arcanis]

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.

I think it's incorrect in this case - the outline is enforced by the following code:

https://github.com/tailwindlabs/tailwindcss/blob/18baa4e7a8edc31100654f75aff606c1896266c0/src/plugins/css/preflight.css#L32-L40

Adding the :focus works because the specificity then becomes equal to this rule.

[vorja]

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

Using Chrome and that fixed it. Thanks!