Focus State

Definition

A state variant (`focus:`) that applies a utility class ONLY when the element is currently selected/active (e.g., clicking into a text input, or tabbing to a button via keyboard).

Explain Like I'm New

When you click inside an email `<input>`, the border should turn blue so you know you are actively typing in it. This is crucial for users who navigate websites using the 'Tab' key instead of a mouse.

Real World Example

Changing an input field from `border-gray-300` to `border-brand-500` the moment the user clicks into it to start typing.

Common Use Cases

•Forms
•Accessibility
•Keyboard navigation

Interactive Example

Interview Questions

basic

What prefix is used to change the background color of an input field when the user clicks into it?

intermediate

What is `focus-visible:` and why is it sometimes better than `focus:`?

Flash Cards

Question

Prefix?

Click to reveal answer

Answer

`focus:bg-gray-100`

Question

focus-visible?

Click to reveal answer

Answer

`focus-visible:` ONLY applies the focus ring if the user navigated to the element using a Keyboard. It hides the focus ring if they clicked it with a Mouse. This prevents ugly blue rings from appearing when mouse users click buttons, while still protecting accessibility for keyboard users.