0
0
Tailwindmarkup~5 mins

Active variant in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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>
OutputSuccess
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.