Tailwind CSS State Handling

Tailwind CSS provides powerful state classes (state modifiers) for controlling style changes of elements under different interaction states.

Tailwind CSS provides a variety of state classes (such as hover:, focus:, active:, etc.) to help developers quickly handle interaction effects. By combining these state classes, you can easily implement style changes for hover, focus, click, and other states, improving user experience.

State class prefixes:

1. Hover

Hover (hover) state refers to when the user hovers the mouse over an element, the element's style changes. Usehover:prefix, you can easily achieve this effect.

Syntax：

hover:{class}

For example,hover:bg-sky-700will change the element's background color to when the mouse hovers over it.sky-700。

Common usage：

When the mouse hovers, the button background color changes fromblue-500tosky-700。

More examples：

• hover:text-white: Turns the text color to white on hover.
• hover:underline: Adds an underline to the text on hover.
• hover:border-2 hover:border-gray-500: Adds a 2px border on hover and sets it to gray.

2. Focus

Focus (focus) state refers to when the user interacts with a form element (such as an input field), the element gains focus. Usefocus:prefix, you can control the element's style when focused.

Syntax：

focus:{class}

For example,focus:ring-2 focus:ring-blue-600displays a blue ring when the element gains focus.

When the user clicks or selects the input field, the input field will display a blue highlighted ring.

More examples：

• focus:text-black: Turns the text color to black on focus.
• focus:border-blue-500: Changes the input field's border color to blue on focus.
• focus:ring-4 focus:ring-opacity-50 focus:ring-green-500: Displays a green ring on focus, highlights it, and sets opacity.

3. Active

Active (active) state refers to when an element is clicked by the user, the element's style will change. Useactive:prefix to control the style when clicked.

Syntax：

active:{class}

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

Common usage：

When the button is pressed, the background color turns green.green-700。

More examples：

• active:text-gray-600: Turns the text color to gray on click.
• active:ring-2 active:ring-opacity-50 active:ring-green-500: Adds a green ring highlight effect to the element on click.

4. Combined States

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

Syntax：

{state}:{class}

For example,dark:md:hover:bg-fuchsia-600changes the background color in dark mode, at medium breakpoints, and on hover.

In normal mode, the button background color changes to on hoversky-700, and in dark mode, the background color changes tofuchsia-600。

More examples：

• sm:focus:ring-2: On small screen devices, add a 2px highlighted ring when the element gains focus.
• lg:active:bg-red-500: On large screen devices, change the background color to red when the button is clicked.

5. Pseudo-classes

Tailwind CSS also supports multiple pseudo-class modifiers, allowing you to apply styles based on the position or order of elements in 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.

• The first list itemItem 1will be bold, and the last list itemItem 3will become a lighter font weight.
• Odd and even items are distinguished by different background colors.

6. Form States

Tailwind CSS provides some form state classes for controlling style changes of form elements in different states, such as required (required), invalid (invalid) and disabled (disabled) states.

Common classes：

• required: Indicates that the input field is required.
• invalid: Used for invalid form input.
• disabled: Disabled form elements.

• If the input field is invalid, a yellow border will be displayed.
• If the input field is disabled, the background color will turn gray.

7. Styling Based on Parent State (Group Modifier)

Tailwind CSS allows you to affect the style of child elements when the parent element is hovered or focused. Using thegroup-hoverandgroup-focusmodifier, you can adjust the child element's style when the parent element's state changes.

Syntax：

group-{state}:{class}

For example,group-hover:bg-gray-300will set the child element's background color to gray when the parent element is hovered.

When the parent container is hovered, the button background color turns gray.

8. Responsive and Dark Mode

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

Syntax：

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

On small screens, the background color changes to on hoverblue-700; on medium screens, a blue highlighted ring is added on focus, and in dark mode, the background color turns gray.

9. Configuring Variants

Intailwind.config.jsIn the file, you can use thevariantssection to configure which state variants are enabled.

In this configuration,backgroundColoradds theactiveandgroup-hoverstate, andtextColoradds thefocus-visibleanddisabledstate.

10. First, Last, Odd and Even

When an element is the first child or the last element, usefirstandlastmodifier to set the element's style:

Effect:

• The text color of the first list item changes to red text-red-500.
• The font of the last list item becomes bold font-bold.

oddModifier: odd is used to select all odd-positioned child elements in the parent container (based on 1-based index).

Effect:The background color of items 1 and 3 in the list changes to light gray bg-gray-100.

evenModifier: even is used to select all even-positioned child elements in the parent container (based on 1-based index).

Effect:The background color of items 2 and 4 in the list changes to a darker gray bg-gray-200.

Modifier Reference