Focus

Click into the Name field: a cursor starts blinking in it, and what you type goes there. The field has focus: it's the element of the page that gets what you type on the keyboard. Only one element can have focus at a time.

Not everybody uses a mouse. Some people move around a page with the keyboard: Tab moves the focus to the next link, button or field, Shift+Tab moves it back, and Enter presses the button that has focus. Try it: click an empty spot at the top of the preview and press Tab a few times. The browser draws an outline around the element with focus. Without the outline, people using the keyboard wouldn't know where on the page they are. So never remove it unless you replace it with your own.

The browser's own outline doesn't always suit the page: on our orange buttons, it's hard to see. Tailwind has two variants for focus:

• focus: applies a class whenever the element has focus (in CSS, :focus). That's right for form fields: they should show that they have focus whether you click into them or get there with Tab.
• focus-visible: applies a class only when the browser decides that the focus should be visible (in CSS, :focus-visible): when you get to a button with the keyboard, but not when you click it with the mouse. That's what we want for buttons. Whoever clicked knows which button it was, and an outline after every click would only get in the way.

The outline itself is made with the outline-* classes. Unlike a border, an outline takes up no space, so nothing on the page moves when it appears:

A field with focus gets an orange outline instead of the browser's: focus:outline-2 focus:outline-orange-500. A button gets the same outline with a small gap, but only when the focus comes from the keyboard: focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500. As you can see, every class that should apply only in a state needs its own variant.

You may also come across ring-* classes, such as focus:ring-2. They draw a similar line around an element with a shadow (box-shadow) and do the same job; in this course, we stick to outlines. And watch out for a common mistake: the class outline-hidden hides the outline. If you use it on its own, without a focus style of your own, people using the keyboard get lost on the page.