Tailwindmarkup~30 mins

Hidden and visibility control in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Hidden and Visibility Control with Tailwind CSS

📖 Scenario: You are building a simple webpage that shows a message. You want to control when the message is visible or hidden using Tailwind CSS classes.

🎯 Goal: Create a webpage with a message inside a <div>. Use Tailwind CSS classes to hide or show the message based on a configuration variable.

📋 What You'll Learn

Use Tailwind CSS classes hidden and block to control visibility

Create a configuration variable called isVisible to decide if the message is shown

Use a simple HTML structure with semantic tags

Make sure the message is accessible and visible when isVisible is true

💡 Why This Matters

🌍 Real World

Controlling visibility of elements is common in web apps for showing notifications, modals, or dynamic content.

💼 Career

Understanding how to toggle visibility with CSS classes and JavaScript is essential for front-end developers working with modern frameworks and libraries.

Progress0 / 4 steps

Create the HTML skeleton with a message

Create a <div> with the class message that contains the text Hello, Tailwind! inside the <main> tag.

Tailwind




    
    
    Visibility Control
    


    
         with class "message" and text "Hello, Tailwind!" here -->

Need a hint?

Use a <div> inside <main> with class message and put the text Hello, Tailwind! inside it.

Add a configuration variable isVisible

Add a <script> tag inside the <body> after <main>. Inside it, create a JavaScript variable called isVisible and set it to true.

Tailwind




    
    
    Visibility Control
    


    
        Hello, Tailwind!
    
     tag here with variable isVisible set to true -->

Need a hint?

Use const isVisible = true; inside a <script> tag placed after the <main> element.

Use JavaScript to add Tailwind visibility classes

Inside the existing <script> tag, write JavaScript code that selects the div with class message and adds the Tailwind class hidden if isVisible is false, or block if isVisible is true.

Tailwind




    
    
    Visibility Control
    


    
        Hello, Tailwind!
    
    
        const isVisible = true;
        // Add code here to select the div.message and add 'hidden' or 'block' class based on isVisible

Need a hint?

Select the div.message using document.querySelector. Use classList.add and classList.remove to toggle hidden and block classes based on isVisible.

Make the message accessible and ensure default visibility

Add the Tailwind class block to the div with class message in the HTML to ensure it is visible by default. Also, add role="region" and aria-live="polite" attributes to the div for accessibility.

Tailwind




    
    
    Visibility Control
    


    
        
        Hello, Tailwind!
    
    
        const isVisible = true;
        const messageDiv = document.querySelector('div.message');
        if (isVisible) {
            messageDiv.classList.add('block');
            messageDiv.classList.remove('hidden');
        } else {
            messageDiv.classList.add('hidden');
            messageDiv.classList.remove('block');
        }

Need a hint?

Add block to the class attribute of div.message. Add role="region" and aria-live="polite" for screen readers.