Tailwindmarkup~30 mins

Media-based dark mode strategy in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Media-based Dark Mode Strategy with Tailwind CSS

📖 Scenario: You are building a simple webpage that changes its colors automatically based on the user's system dark mode preference. This helps users see the page comfortably whether they prefer light or dark themes.

🎯 Goal: Create a webpage using Tailwind CSS that uses the media-based dark mode strategy. The page should have a heading and a paragraph. The background and text colors should switch automatically when the user changes their system theme between light and dark.

📋 What You'll Learn

Use Tailwind CSS with the media strategy for dark mode

Create a heading with the text Welcome to Dark Mode Demo

Create a paragraph with the text This page adapts to your system theme.

Use background and text colors that change between light and dark modes

Ensure the page is responsive and accessible

💡 Why This Matters

🌍 Real World

Many websites today adapt their look automatically to the user's system dark mode preference to improve comfort and reduce eye strain.

💼 Career

Knowing how to implement media-based dark mode with Tailwind CSS is a valuable skill for front-end developers building modern, user-friendly websites.

Progress0 / 4 steps

Create the HTML skeleton with Tailwind CSS link

Create a basic HTML5 page with lang="en", charset="UTF-8", and a viewport meta tag. Add the Tailwind CSS CDN link inside the <head>. Inside the <body>, add a <main> element with a <h1> and a <p> containing the texts Welcome to Dark Mode Demo and This page adapts to your system theme. respectively.

Tailwind




    
    
    


    
        Welcome to Dark Mode Demo
        This page adapts to your system theme.

Need a hint?

Remember to include the Tailwind CSS CDN script inside the <head> to use Tailwind classes.

Configure Tailwind to use media-based dark mode

Add a <script> block inside the <head> before the Tailwind CSS script. Inside it, configure Tailwind with tailwind.config = { darkMode: 'media' } to enable media-based dark mode strategy.

Tailwind




    
    
    
    


    
        Welcome to Dark Mode Demo
        This page adapts to your system theme.

Need a hint?

Put the Tailwind config script before the Tailwind CSS script so the config applies correctly.

Add Tailwind classes for light and dark mode colors

Add Tailwind CSS classes to the <main> element to set the background color to bg-white in light mode and dark:bg-gray-900 in dark mode. Also add text color classes text-gray-900 for light mode and dark:text-gray-100 for dark mode.

Tailwind




    
    
    
        tailwind.config = {
            darkMode: 'media'
        }
    
    


    
        Welcome to Dark Mode Demo
        This page adapts to your system theme.

Need a hint?

Use bg-white and dark:bg-gray-900 for background colors. Use text-gray-900 and dark:text-gray-100 for text colors. Add some padding and center the content with flexbox.

Add accessibility and responsive improvements

Add role="main" to the <main> element for accessibility. Also add aria-label="Main content area" to describe the main section. Finally, add responsive text sizes: text-2xl sm:text-3xl to the <h1> and text-base sm:text-lg to the <p>.

Tailwind




    
    
    
        tailwind.config = {
            darkMode: 'media'
        }
    
    


    
        Welcome to Dark Mode Demo
        This page adapts to your system theme.

Need a hint?

Use role="main" and aria-label="Main content area" on the main element. Use responsive text size classes on the heading and paragraph.