Summary  
This chapter introduces using state prefixes (hover:, focus:, disabled:) in a utility-first styling approach to conditionally apply styles based on user interactions.

General domain of usage  
Frontend UI styling.

Tailwind provides utility classes to style elements based on user interaction.



## Hover State

```jsx
<button className="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
  Hover me
</button>
```
`hover:bg-blue-700`: changes background on hover.



## Focus State

```jsx
<input className="border p-2 focus:border-blue-500 outline-none" />
```
`focus:border-blue-500`: changes border when focused.



## Disabled State

```jsx
<button className="bg-gray-400 text-white px-4 py-2 rounded disabled:opacity-50" disabled>
  Disabled
</button>
```
`disabled:opacity-50`: reduces opacity when disabled.


Use state prefixes like `hover:`, `focus:`, and `disabled:` to style interactive elements.


Which Tailwind CSS utility class changes an element's background color when a user hovers over it?

Learn how to build and style modern interfaces with Tailwind CSS using utility classes and reusable UI patterns. Apply spacing, colors, layout, responsive rules, and interaction states to create clean React components and prepare for Next.js projects.

Interaction States

Hover State

Focus State

Disabled State