Arbitrary variants for custom selectors in Tailwind - Mini Project: Build & Apply

Using Arbitrary Variants for Custom Selectors in Tailwind CSS

📖 Scenario: You are building a simple webpage with buttons that change style when hovered or focused. You want to use Tailwind CSS's arbitrary variants feature to apply styles based on custom selectors like :focus-visible and a custom data attribute.

🎯 Goal: Create a button styled with Tailwind CSS that changes background color when hovered, changes border color when focused using the :focus-visible pseudo-class, and changes text color when a custom attribute data-active="true" is present using an arbitrary variant selector.

📋 What You'll Learn

Create a button element with the text 'Click Me'.

Use Tailwind CSS classes to style the button with padding, border, and rounded corners.

Add an arbitrary variant to change the border color on :focus-visible.

Add an arbitrary variant to change the text color when the button has data-active="true" attribute.

Add a hover effect to change the background color.

💡 Why This Matters

🌍 Real World

Custom selectors let you style elements based on states or attributes that Tailwind does not support by default. This is useful for accessibility states, custom data attributes, or complex UI interactions.

💼 Career

Knowing how to use arbitrary variants in Tailwind CSS helps you build flexible, maintainable, and accessible user interfaces in modern web development jobs.

1

Create the button element with basic Tailwind CSS styles

Create a <button> element with the text Click Me. Add Tailwind CSS classes px-4, py-2, border, and rounded to give padding, a border, and rounded corners.

Tailwind

Click Me  

Need a hint?

Use the class attribute to add Tailwind classes for padding, border, and rounded corners.

2

Add a hover background color using Tailwind CSS

Add the Tailwind CSS class hover:bg-blue-500 to the existing button's class attribute to change the background color to blue when hovered.

Tailwind

Click Me  

Need a hint?

Use the hover: prefix in Tailwind to add styles on hover.

3

Add an arbitrary variant for :focus-visible to change border color

Add the arbitrary variant [&:focus-visible]:border-red-500 to the button's class attribute to change the border color to red when the button is focused and visible.

Tailwind

Click Me  

Need a hint?

Use square brackets [] to add an arbitrary variant with the :focus-visible pseudo-class.

4

Add an arbitrary variant for a custom attribute selector to change text color

Add the arbitrary variant [&[data-active=\"true\"]]:text-green-600 to the button's class attribute to change the text color to green when the button has the attribute data-active="true".

Tailwind

Click Me  

Need a hint?

Escape quotes inside the attribute selector with backslashes \" inside the class attribute.