0
0
Tailwindmarkup~5 mins

Focus variant in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The focus variant helps you change how an element looks when you click or tab to it. This makes it easier for people to see where they are on the page.

When you want to highlight a button after someone clicks or tabs to it.
To show a visible outline on form inputs when users type or select them.
When making links easier to spot during keyboard navigation.
To improve accessibility by giving clear focus indicators.
When you want to add special styles only while an element is focused.
Syntax
Tailwind
focus:<utility-class>
Use focus: before any Tailwind utility to apply styles only when the element is focused.
This works with keyboard navigation and mouse clicks that focus the element.
Examples
This button removes the default outline and adds a blue ring when focused.
Tailwind
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500">Click me</button>
The input border turns green when you focus inside the box.
Tailwind
<input class="focus:border-green-500 border-2 border-gray-300 p-2" type="text" placeholder="Type here">
The link text changes to red only when it is focused.
Tailwind
<a href="#" class="focus:text-red-600">Link</a>
Sample Program

This page shows three elements: a button, an input box, and a link. Each changes style when you focus on it by clicking or tabbing. The button gets a blue ring, the input border turns green with a ring, and the link text turns red.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Focus Variant Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col items-center justify-center min-h-screen bg-gray-50 gap-6 p-4">
  <button class="px-4 py-2 bg-blue-600 text-white rounded focus:outline-none focus:ring-4 focus:ring-blue-300">
    Focus Me
  </button>
  <input type="text" placeholder="Focus me" class="border-2 border-gray-400 rounded px-3 py-2 focus:border-green-500 focus:ring-2 focus:ring-green-300 focus:outline-none" />
  <a href="#" class="text-gray-700 underline focus:text-red-600 focus:no-underline">
    Focusable Link
  </a>
</body>
</html>
OutputSuccess
Important Notes

Always keep focus styles visible for keyboard users to improve accessibility.

Use focus:outline-none carefully; always add another visible focus style if you remove the default outline.

Test focus styles by using the keyboard (Tab key) to navigate your page.

Summary

The focus variant in Tailwind applies styles only when an element is focused.

It helps users see which element is active, improving navigation and accessibility.

Use focus: before any utility class to add these styles.