Tailwind CSS State Handling | Ruanyu Tutorial

Tailwind CSS provides powerful state classes (state modifiers) to control style changes of elements under different interactive states.

Tailwind CSS offers various state classes (such as `hover:`, `focus:`, `active:`, etc.) to help developers quickly handle interactive effects. By combining these state classes, you can easily implement style changes for hover, focus, click, and other states, enhancing user experience.

State Class Prefixes

State	Prefix	Effect
Hover State	`hover:`	Controls the style change when the mouse hovers over an element
Focus State	`focus:`	Controls the style change when an element gains focus
Active State	`active:`	Controls the style change when an element is clicked
Visited State	`visited:`	Controls the style of visited links
Focus Within State	`focus-within:`	Controls the style change when a parent element's child element gains focus
Combined States	No specific prefix	Multiple state prefixes can be combined, such as `hover:`, `focus:`, and `active:`

1. Hover

The `hover` state refers to the style change that occurs when a user hovers their mouse over an element. Using the `hover:` prefix, you can easily achieve this effect.

Syntax

hover:{class}

For example, `hover:bg-sky-700` will change the background color of an element to `sky-700` when the mouse hovers over it.

Common Usage

Example

Hover over me Try it »

When the mouse hovers over the button, its background color changes from `blue-500` to `sky-700`.

More Examples

• `hover:text-white`: Changes the text color to white on hover.
• `hover:underline`: Adds an underline to the text on hover.
• `hover:border-2 hover:border-gray-500`: Increases the border thickness to 2px and sets it to gray on hover.

2. Focus

The `focus` state refers to the style change that occurs when a user interacts with a form element (such as an input box), causing it to gain focus. Using the `focus:` prefix, you can control the style of an element when it gains focus.

Syntax

focus:{class}

For example, `focus:ring-2 focus:ring-blue-600` will display a blue ring around an element when it gains focus.

Example

Try it »

When the user clicks or selects the input box, a blue highlight ring appears around it.

More Examples

• `focus:text-black`: Changes the text color to black when focused.
• `focus:border-blue-500`: Changes the border color to blue when focused.
• `focus:ring-4 focus:ring-opacity-50 focus:ring-green-500`: Displays a green ring with adjustable opacity when focused.

3. Active

The `active` state refers to the style change that occurs when an element is clicked by the user. Using the `active:` prefix, you can control the style of an element when it is clicked.

Syntax

active:{class}

For example, `active:bg-green-700` will change the background color to green when the element is pressed.

Common Usage

Example

Click me Try it »

When the button is pressed, its background color changes to green `green-700`.

More Examples

• `active:text-gray-600`: Changes the text color to gray when clicked.
• `active:ring-2 active:ring-opacity-50 active:ring-green-500`: Adds a green highlight ring with adjustable opacity when clicked.

4. Combined States

Tailwind CSS supports combining multiple state modifiers, allowing you to precisely control style changes in interactive states. For example, you can combine hover, focus, active states, as well as responsive or dark mode settings.

Syntax

{state}:{class}

For example, `dark:md:hover:bg-fuchsia-600` will change the background color to fuchsia when hovering at medium breakpoints in dark mode.

Example

Hover or focus me Try it »

In normal mode, the button's background color changes to sky-700 on hover, while in dark mode, it changes to fuchsia.

More Examples

• `sm:focus:ring-2`: Adds a 2px highlight ring when focusing on small screens.
• `lg:active:bg-red-500`: Changes the background color to red when clicking on large screens.

5. Pseudo-classes

Tailwind CSS also supports various pseudo-class modifiers, allowing you to apply styles based on an element's position or order within the document.

Common Pseudo-Class Modifiers

• `first-child`: Applies to the first child element.
• `last-child`: Applies to the last child element.
• `odd-child`: Applies to child elements at odd positions.
• `even-child`: Applies to child elements at even positions.

Example

• Item 1
• Item 2
• Item 3

Try it »

Item 1 becomes bold, Item 3 gets a lighter font, and odd/even items are distinguished by different background colors.

6. Form States

Tailwind CSS provides several form state classes to control style changes of form elements in different states, such as required (`required`), invalid (`invalid`), and disabled (`disabled`).

Common Classes

• `required`: Indicates a required input field.
• `invalid`: Used for invalid form inputs.
• `disabled`: Disabled form elements.

Example

Try it »

If the input field is invalid, it displays a yellow border; if disabled, the background turns gray.

7. Parent-State-Based Styles

Tailwind CSS allows you to influence the styles of child elements when the parent element is hovered or focused. Using the `group-hover` and `group-focus` modifiers, you can adjust child element styles when the parent state changes.

Syntax

group-{state}:{class}

For example, `group-hover:bg-gray-300` will change the background color of child elements to gray when the parent element is hovered.

Example

Try it »

When the parent container is hovered, the button's background color changes to gray.

8. Responsive and Dark Mode

Tailwind CSS lets you combine responsive prefixes and dark mode modifiers to apply different styles across screen sizes and modes.

Syntax

• Responsive prefixes: `sm:`, `md:`, `lg:`, `xl:`, `2xl:`
• Dark mode prefix: `dark:`

Example

Responsive and dark-mode button Try it »

On small screens, the background color changes to blue-700 on hover; on medium screens, a blue highlight ring appears when focused; and in dark mode, the background turns gray.

9. Configuring Variants

In the `tailwind.config.js` file, you can configure which state variants to enable through the `variants` section. This allows you to enable or disable specific style changes based on project needs.

Example

```javascript module.exports = { theme: { extend: {}, }, variants: { extend: { backgroundColor: ['active', 'group-hover'], textColor: ['focus-visible', 'disabled'], }, }, };

In this configuration, `backgroundColor` includes `active` and `group-hover` states, while `textColor` adds `focus-visible` and `disabled` states.

10. First, Last, Odd, Even

When an element is the first or last child, use the `first` and `last` modifiers to set its style:

Example

• First item
• Second item
• Last item

Try it »

The first list item's text color turns red, the last one becomes bold, and the rest follow suit.

Odd Modifier

The `odd` modifier selects all child elements at odd positions (starting from index 1):

Example

• Item 1
• Item 2
• Item 3
• Item 4

Try it »

The background color of Items 1 and 3 turns light gray.

Even Modifier

The `even` modifier selects all child elements at even positions (starting from index 1):

Example

• Item 1
• Item 2
• Item 3
• Item 4

Try it »

The background color of Items 2 and 4 turns darker gray.

Modifier Reference

Modifier	CSS Equivalent Pseudo-class/Pseudo-element or Rule	Description	Example Code
`hover`	`:hover`	Effective when the mouse hovers over an element	<button class="hover:bg-blue-500">Hover me</button>
`focus`	`:focus`	Effective when an element gains focus	<input class="focus:ring-2 focus:ring-blue-600">
`focus-within`	`:focus-within`	Effective when any child element inside a parent element gains focus	<div class="focus-within:border-blue-500"><input /></div>
`focus-visible`	`:focus-visible`	Effective when focus is activated via keyboard navigation or assistive technology	<input class="focus-visible:ring-2 focus-visible:ring-blue-600">
`active`	`:active`	Effective when an element is pressed or actively engaged	<button class="active:bg-green-700">Click me</button>
`visited`	`:visited`	Effective for visited links	<a class="visited:text-purple-600">Visited link</a>
`target`	`:target`	Effective when a target link is activated	<div id="section" class="target:bg-yellow-500">
`first`	`:first-child`	Effective for the first child element	<ul><li class="first:text-red-500">First</li><li>Other</li></ul>
`last`	`:last-child`	Effective for the last child element	<ul><li>Other</li><li class="last:font-bold">Last</li></ul>
`odd`	`:nth-child(odd)`	Effective for odd-numbered child elements (starting from index 1)	<ul><li class="odd:bg-gray-100">Odd</li><li>Even</li></ul>
`even`	`:nth-child(even)`	Effective for even-numbered child elements (starting from index 1)	<ul><li>Odd</li><li class="even:bg-gray-200">Even</li></ul>
`empty`	`:empty`	Effective for empty elements	<div class="empty:bg-gray-50">
`disabled`	`:disabled`	Effective for disabled form elements	<button class="disabled:opacity-50" disabled>Disabled</button>
`enabled`	`:enabled`	Effective for enabled form elements	<input class="enabled:border-blue-500">
`checked`	`:checked`	Effective for checked checkboxes or radio buttons	<input type="checkbox" class="checked:bg-blue-500" checked>
`required`	`:required`	Effective for required form elements	<input class="required:border-red-500" required>
`before`	`::before`	Effective for inserting pseudo-elements before an element	<div class="before:content-['*'] before:text-red-500">
`after`	`::after`	Effective for inserting pseudo-elements after an element	<div class="after:content-['*'] after:text-red-500">