Handling States in Tailwind CSS

Tailwind CSS provides state modifiers that allow you to conditionally apply utility classes when an element is in a specific state, such as hover, focus, or active.

State modifiers are added to the beginning of a utility class, followed by a colon. For example, to change the background color of a button when you hover over it, you might use the hover:bg-blue-700 utility class.

Common State Modifiers

hover: - Applies styles when the user hovers over the element.
focus: - Applies styles when the element has keyboard focus.
active: - Applies styles when the element is being clicked.
visited: - Applies styles to visited links.
disabled: - Applies styles when the element is disabled.

Example

Here's an example of how to use state modifiers to create an interactive button and a hoverable card component.

<!doctype html>
<title>Tailwind CSS States Example</title>
<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 p-8 flex flex-col items-center space-y-8">

<button class="bg-blue-500 hover:bg-blue-700 active:bg-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 text-white font-bold py-2 px-4 rounded transition-all">
    Hover, Active & Focus
  </button>

<div class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500 transition-colors">
    <div class="flex items-center space-x-3">
      <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white transition-colors" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
      </svg>
      <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold transition-colors">New project</h3>
    </div>
    <p class="text-slate-500 group-hover:text-white text-sm transition-colors">Create a new project from a variety of starting templates.</p>
  </div>

</body>

View Output

Group Hover State

The group and group-hover utility classes allow you to style child elements based on the state of their parent element. By adding the group class to the parent and the group-hover: modifier to the children, you can trigger style changes across multiple elements when the parent is hovered over.

In the card example above, the background color of the card and the text color of the child elements all change when the card itself is hovered over (even if the mouse pointer is not over the text). If these used hover: instead of group-hover:, then the text color would only change when the user hovered over the text itself.

In the next page, we'll see how to build responsive layouts using Tailwind CSS's powerful breakpoint modifiers.