Active variant in Tailwind

Introduction

The active variant helps you style elements when they are being clicked or pressed. It makes buttons or links show a different look while you hold the mouse or tap on them.

You want a button to look pressed down when clicked.

You want a link to change color while it is being tapped on a phone.

You want to give users feedback that their click is recognized.

You want to improve the feel of interactive elements on your page.

Syntax

Tailwind

active:<utility>

Use active: before any Tailwind utility class to apply styles only when the element is active (clicked or pressed).

This works for buttons, links, and other clickable elements.

Examples

The button has a blue background normally, but when clicked, it changes to a darker blue.

Tailwind

<button class="bg-blue-500 active:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me</button>

The link text changes from gray to red while it is being pressed.

Tailwind

<a href="#" class="text-gray-700 active:text-red-500">Press me</a>

The button border color changes from gray to black when active.

Tailwind

<button class="border border-gray-400 active:border-black">Press border</button>

Sample Program

This page shows a green button. When you click and hold it, the green color becomes darker. This uses the active: variant to change the background color only while the button is pressed.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Active Variant Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100">
  <button class="bg-green-500 active:bg-green-700 text-white font-semibold py-3 px-6 rounded shadow-lg transition-colors duration-200">
    Press Me
  </button>
</body>
</html>

Important Notes

The active variant only applies while the element is being pressed or clicked, not after.

It works well with transition classes to make the color change smooth.

Remember to use semantic HTML elements like <button> for better accessibility.

Summary

The active: variant styles elements only while they are clicked or pressed.

Use it to give users visual feedback on buttons and links.

Combine with transitions for smooth effects and use semantic HTML for accessibility.

Practice

1. What does the active: variant in Tailwind CSS do?

easy

A. Applies styles only while the element is being clicked or pressed

B. Applies styles when the element is hovered over

C. Applies styles when the element is focused via keyboard

D. Applies styles permanently after the element is clicked once

Solution

1. Step 1: Understand the active: variant purpose

   The active: variant targets the moment an element is clicked or pressed, giving immediate feedback.

2. Step 2: Compare with other states

   Hover applies on mouse over, focus applies on keyboard focus, and permanent styles are not related to active:.

3. Final Answer:

   Applies styles only while the element is being clicked or pressed -> Option A

4. Quick Check:

   active: = clicked/pressed state [OK]

Hint: Remember active means 'pressed down' state only [OK]

Common Mistakes:

• Confusing active with hover or focus states
• Thinking active styles stay after click
• Using active for keyboard focus feedback

2. Which of these is the correct way to apply a red background only while a button is pressed using Tailwind's active variant?

easy

A. <button class='hover:bg-red-700 active:bg-red-500'>Click me</button>

B. <button class='bg-red-500 active:bg-red-700'>Click me</button>

C. <button class='active:bg-red-500 bg-red-700'>Click me</button>

D. <button class='bg-red-700 active:bg-red-700'>Click me</button>

Solution

1. Step 1: Identify base and active styles

   The base background is bg-red-500, and the active state changes it to bg-red-700.

2. Step 2: Check class order and correctness

   <button class='bg-red-500 active:bg-red-700'>Click me</button> correctly sets the base and active variant. Other options either reverse colors or misuse classes.

3. Final Answer:

   <button class='bg-red-500 active:bg-red-700'>Click me</button> -> Option B

4. Quick Check:

   Base color then active variant = <button class='bg-red-500 active:bg-red-700'>Click me</button> [OK]

Hint: Base style first, then active:variant for pressed effect [OK]

Common Mistakes:

• Swapping base and active colors
• Using active without base style
• Confusing hover and active variants

3. Given this button code:

<button class='bg-blue-400 active:bg-blue-600 text-white px-4 py-2 rounded'>Press</button>

What background color will the button have while it is being clicked?

medium

A. bg-white

B. bg-blue-400

C. bg-blue-600

D. No background color

Solution

1. Step 1: Identify base and active background classes

   The base background is bg-blue-400. The active variant changes it to bg-blue-600 when pressed.

2. Step 2: Determine background during active state

   While clicking, the active:bg-blue-600 applies, overriding the base color.

3. Final Answer:

   bg-blue-600 -> Option C

4. Quick Check:

   Active variant overrides base color when pressed [OK]

Hint: Active variant color overrides base on press [OK]

Common Mistakes:

• Choosing base color instead of active
• Confusing text color with background
• Ignoring active variant effect

4. This button code is intended to change background color when pressed, but it doesn't work:

<button class='bg-green-500 active-bg-green-700 text-white'>Click</button>

What is the error?

medium

A. The button tag cannot use active variant

B. The base color bg-green-500 is missing

C. The text color text-white conflicts with active variant

D. The active variant syntax is incorrect; it should be active:bg-green-700

Solution

1. Step 1: Check active variant syntax

   The correct syntax uses a colon: active:bg-green-700. The code uses a dash instead, which is invalid.

2. Step 2: Verify other classes

   Base color and text color are correct. Button supports active variant.

3. Final Answer:

   The active variant syntax is incorrect; it should be active:bg-green-700 -> Option D

4. Quick Check:

   Use colon for variants like active: [OK]

Hint: Variants use colon, not dash (active:bg-color) [OK]

Common Mistakes:

• Using dash instead of colon for variants
• Assuming text color affects active variant
• Thinking button can't have active styles

5. You want a link that changes text color to purple only while pressed, and smoothly transitions back after release. Which Tailwind classes achieve this?

hard

A. <a href='#' class='text-gray-800 active:text-purple-600 transition-colors duration-300'>Link</a>

B. <a href='#' class='text-gray-800 hover:text-purple-600 transition duration-300'>Link</a>

C. <a href='#' class='text-purple-600 active:text-gray-800 transition-colors duration-300'>Link</a>

D. <a href='#' class='text-gray-800 active:text-purple-600 duration-300'>Link</a>

Solution

1. Step 1: Identify active text color change

   The link should have base text color text-gray-800 and change to text-purple-600 only when pressed, so active:text-purple-600 is correct.

2. Step 2: Add smooth transition for color changes

   Use transition-colors and duration-300 for smooth color transitions on press and release.

3. Final Answer:

   <a href='#' class='text-gray-800 active:text-purple-600 transition-colors duration-300'>Link</a> -> Option A

4. Quick Check:

   Active variant + transition-colors + duration = <a href='#' class='text-gray-800 active:text-purple-600 transition-colors duration-300'>Link</a> [OK]

Hint: Use active: for press + transition-colors for smooth effect [OK]

Common Mistakes:

• Using hover instead of active for press effect
• Missing transition-colors for smooth change
• Reversing base and active colors