Tailwindmarkup~15 mins

Active variant in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Using Tailwind CSS Active Variant for Button Interaction

📖 Scenario: You are building a simple webpage with a button that changes its background color when clicked (active state). This helps users see when they are pressing the button, just like pressing a real button in daily life.

🎯 Goal: Create a button styled with Tailwind CSS that changes its background color when it is actively clicked using the active variant.

📋 What You'll Learn

Create a button element with the text 'Click Me'

Use Tailwind CSS classes to style the button with a base background color of blue

Add the active variant to change the background color to green when the button is pressed

Ensure the button has padding and rounded corners for a friendly look

Make sure the button is accessible with a clear label

💡 Why This Matters

🌍 Real World

Buttons with active states give users clear feedback when they interact with web pages, improving user experience just like physical buttons do in real life.

💼 Career

Understanding how to use Tailwind CSS variants like active is important for front-end developers to build interactive and accessible user interfaces efficiently.

Progress0 / 4 steps

Create the HTML button element

Write an HTML <button> element with the text Click Me inside the <body> tag.

Tailwind




    
    
    Active Variant Button

Need a hint?

Use the <button> tag inside the <body> and write the text Click Me inside it.

Add base Tailwind CSS styles to the button

Add Tailwind CSS classes to the <button> to give it a blue background using bg-blue-500, white text with text-white, padding with px-4 and py-2, and rounded corners with rounded.

Tailwind




    
    
    Active Variant Button
    


    Click Me

Need a hint?

Add the classes bg-blue-500, text-white, px-4, py-2, and rounded inside the button's class attribute.

Add the active variant to change background color on click

Add the Tailwind CSS active:bg-green-500 class to the button's class attribute so the background color changes to green when the button is pressed.

Tailwind




    
    
    Active Variant Button
    


    Click Me

Need a hint?

Include active:bg-green-500 in the button's class attribute to change the background color when the button is pressed.

Add accessibility with aria-label and center the button

Add an aria-label="Click Me Button" attribute to the <button> for accessibility. Also, wrap the button inside a <main> element with Tailwind classes flex justify-center items-center min-h-screen to center it vertically and horizontally on the page.

Tailwind




    
    
    Active Variant Button
    


    
        Click Me

Need a hint?

Wrap the button inside a <main> with classes flex justify-center items-center min-h-screen and add aria-label="Click Me Button" to the button.