DEV Community

Priyanka-Chettri
Priyanka-Chettri

Posted on

Unveiling the Magic of hover, focus and active variants in Tailwind CSS.

💡𝐏𝐫𝐨 𝐓𝐢𝐩: Make your UI elements pop with Tailwind CSS! Use 𝐡𝐨𝐯𝐞𝐫, 𝐟𝐨𝐜𝐮𝐬, and 𝐚𝐜𝐭𝐢𝐯𝐞 variants to enhance user experience and engagement. Your designs will thank you!

Cover Page

Dive into this demo to see them in action!
Ready to give it a try? Check out the code below and start
experimenting! 👇

➡️ Snippet of "hover" variant applied to a button.
Hover Code

➡️ Snippet of a "focus" variant applied to a button
Focus Code

➡️ Snippet of an "active" variant applied to a button
Active Code

Top comments (2)

Collapse
 
moopet profile image
Ben Sinclair

Just a heads up that the Markdown we use here supports syntax highlighting, and is generally more accessible than inserting an image of code. Images of text are an issue for people using screen readers, for example, and their content won't get picked up by the site's search facility.

You can add code blocks with 3 backticks: code block with colors example More details in our editor guide!

Collapse
 
priyankachettri profile image
Priyanka-Chettri

Noted. Thanks for the feedback!