Add :focus-visible variant

[austingreendev]

Closes #1766

This PR implements the :focus-visible variant. It is not enabled by default for any utilities.

Detail

The :focus-visible pseudo-class allows authors to provide clearly identifiable focus styles which are visible when a user is likely to need to understand where focus is, but not visible in other cases.

It is defined in the Selectors Level 4 specification along with the :focus-within variant.

Documentation

Browser support is limited, but consumers often use the postcss-focus-visible plugin along with the official polyfill.

If this PR is accepted I will create a follow-on PR for the docs repo.

[AlexVipond]

@Austin94 nice work! To cover the two main use cases, it would be cool to support keyboard-focus as an alias for :focus-visible, and mouse-focus as an alias for :focus:not(:focus-visible)

mouse-focus:shadow-none
keyboard-focus:shadow-outline

[austingreendev]

I would definitely be able to add this if you find it valuable!

The only concern I have is that the :focus-visible spec tries hard to not provide mouse vs keyboard differentiators. Depending on the type of interaction focus-visible styling could be shown by both keyboard and mouse interaction. The most common example is inputs:

Any element which supports keyboard input (such as an input element, or any other element which may trigger a virtual keyboard to be shown on focus if a physical keyboard is not present) should always match :focus-visible when focused.

Based off the spec I'm not sure the mouse-focus and keyboard-focus would be correct 100% of the time.

[AlexVipond]

Good point—probably better for Tailwind to stick to the basic implementation, and rely on community plugins to provide the more opinionated, not-always-accurate APIs

[austingreendev]

@AlexVipond is there anyone else that I need to add to review this fully?

[AlexVipond]

@Austin94 I think the Tailwind team usually reviews a bunch of pull requests all in one go. Not sure when they're planning to do the next batch, as they've been hiring people and working on Tailwind UI lately.

@adamwathan @bradlc any sense of when the next batch of reviews will happen?

[adamwathan]

Been wanting to add this for a while but held off because of a bug in the polyfill that has since been fixed, so happy to merge this now. Thanks @Austin94!