Remove the default button outline from normalize.css

[justingolden21]

Problem

Every time anyone ever writes code about the :focus state of something, they need to explicitly mention button as well because of this.

Example:

*:focus {
	@apply outline-none ring-2 ring-indigo-500 ring-opacity-50;
}

does not work and the TailwindCSS user must specify button every time just to overwrite this style:

-*:focus {
+*focus, button:focus {
	@apply outline-none ring-2 ring-indigo-500 ring-opacity-50;
}

Reasoning

This seems against Tailwind's motto of being "unopinionated" and makes code harder to write.

The CSS above can be vaguely translated into:

:focus,
button:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--tw-empty, ) 0 0 0 2px rgba(99, 102, 241, 0.5);
}

Which works like so on focused buttons:

As well as links:

However, remove the explicity mention of button:

+*:focus {
-*focus, button:focus {
	@apply outline-none ring-2 ring-indigo-500 ring-opacity-50;
}

And we get this in Chrome:

this in Firefox:

and this in Edge:

Yuck.

Solution

The culprit is this line created inside TailwindCSS:

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

Removing this line cleans everything back up:

Chrome:

Firefox:

Edge:

Counterargument Rebuttal

I understand that the default outline is there to make sure buttons are shown an outline if no styles are provided.

However, this impedes on the user writing their own styles, and creates inconsistency within the user-interface, which are two things I believe Tailwind is very much opposed to.

[justingolden21]

By the way, this is off topic, but it seems that in var(--tw-empty, ) both the comma and the space after the comma must be there or the styles break; does anybody know why this behaves like this?

[adamwathan]

This is intentional and necessary, the empty space is valid content. Read towards the end of this blog post for a better understanding of how it works:

https://adamwathan.me/composing-the-uncomposable-with-css-variables/

[adamwathan]

Hey! No plans to fork normalize and change it I'm afraid, so I would recommend just authoring your global focus styles the way you demonstrated:

*:focus, button:focus {
	@apply outline-none ring-2 ring-indigo-500 ring-opacity-50;
}

Not really an annoying or high effort solution.