Pairing light and dark colors in Tailwind - Mini Project: Build & Apply

Pairing Light and Dark Colors with Tailwind CSS

📖 Scenario: You are creating a simple webpage that changes its background and text colors based on light or dark mode. This helps users read content easily whether they prefer bright or dark screens.

🎯 Goal: Build a webpage using Tailwind CSS that shows a heading and a paragraph. The background color should be light in normal mode and dark in dark mode. The text color should contrast well in each mode.

📋 What You'll Learn

Use Tailwind CSS classes to set background colors for light and dark modes

Use Tailwind CSS classes to set text colors that contrast with the background

Include a heading and a paragraph inside a main section

Make sure the page uses semantic HTML5 elements

Add the dark class on the html element to enable dark mode styling

💡 Why This Matters

🌍 Real World

Many websites offer light and dark themes to improve readability and user comfort depending on lighting conditions.

💼 Career

Understanding how to use Tailwind CSS for theming and accessibility is valuable for frontend web development roles.

1

Create the HTML skeleton with semantic elements

Write the basic HTML5 structure with html, head, and body tags. Inside the body, add a main element containing a h1 heading with the text "Welcome to Color Modes" and a p paragraph with the text "This page changes colors for light and dark modes."

Tailwind

    
    
    Color Modes


    
        
    

Hint

Use semantic tags: <main>, <h1>, and <p> with the exact text provided.

2

Add Tailwind CSS link and enable dark mode class on html

Add the Tailwind CSS CDN link inside the <head> section. Then add the class="dark" attribute to the <html> tag to enable dark mode styling.

Tailwind

    
    
    Color Modes
    


    
        Welcome to Color Modes
        This page changes colors for light and dark modes.
    

Hint

Use the Tailwind CDN script tag inside <head> and add class="dark" to the <html> tag.

3

Add Tailwind classes for light and dark background and text colors

Inside the <main> tag, add Tailwind classes to set the background color to bg-white for light mode and dark:bg-gray-900 for dark mode. Also add text color classes text-gray-900 for light mode and dark:text-gray-100 for dark mode.

Tailwind

    
    
    Color Modes
    


    
        Welcome to Color Modes
        This page changes colors for light and dark modes.
    

Hint

Use Tailwind classes for background and text colors with dark: prefix for dark mode.

4

Add padding and center the content with Tailwind

Add Tailwind classes to the <main> tag to add padding p-8 and center the text horizontally with text-center.

Tailwind

    
    
    Color Modes
    


    
        
    

Hint

Add p-8 for padding and text-center to center the text inside the <main> tag.

Practice

1. Which Tailwind color pairing is best for readability on a light background?

easy

A. Use bg-gray-200 with text-gray-300

B. Use bg-white with text-white

C. Use bg-black with text-black

D. Use bg-white with text-black

Solution

1. Step 1: Understand light background with dark text

   Light backgrounds like white need dark text for clear contrast.

2. Step 2: Match Tailwind classes for this pairing

   bg-white is light background, text-black is dark text, making text easy to read.

3. Final Answer:

   Use bg-white with text-black -> Option D

4. Quick Check:

   Light background + dark text = Use bg-white with text-black [OK]

Hint: Light background needs dark text for best contrast [OK]

Common Mistakes:

• Using light text on light background
• Using dark background with dark text
• Ignoring contrast for readability

2. Which Tailwind class combination correctly pairs a dark background with light text?

easy

A. bg-gray-100 text-gray-900

B. bg-black text-white

C. bg-white text-gray-200

D. bg-yellow-50 text-yellow-100

Solution

1. Step 1: Identify dark background and light text classes

   bg-black is a dark background, text-white is light text.

2. Step 2: Confirm correct pairing

   This pairing ensures good contrast and readability on dark backgrounds.

3. Final Answer:

   bg-black text-white -> Option B

4. Quick Check:

   Dark background + light text = bg-black text-white [OK]

Hint: Dark background pairs with light text for clarity [OK]

Common Mistakes:

• Using light background classes with dark text
• Mixing similar light colors causing low contrast
• Confusing background and text classes

3. What will be the visible text color on a bg-gray-900 background with text-gray-300 in Tailwind?

medium

A. Light gray text, readable on dark background

B. Black text, invisible on dark background

C. White text, very bright

D. Very dark gray text, hard to read

Solution

1. Step 1: Understand the background color bg-gray-900

   This is a very dark gray background, almost black.

2. Step 2: Understand the text color text-gray-300

   This is a light gray color, which contrasts well on dark backgrounds.

3. Final Answer:

   Light gray text, readable on dark background -> Option A

4. Quick Check:

   Dark background + light gray text = Light gray text, readable on dark background [OK]

Hint: Dark background with light gray text is readable [OK]

Common Mistakes:

• Assuming gray-300 is dark text
• Confusing gray scale numbers for lightness
• Ignoring contrast importance

4. Identify the error in this Tailwind pairing: bg-white text-gray-100

medium

A. Text color is too light on white background, low contrast

B. Background color is too dark for the text

C. Classes are missing the hover: prefix

D. Text color and background color are the same

Solution

1. Step 1: Analyze background color bg-white

   This is a very light background.

2. Step 2: Analyze text color text-gray-100

   This is a very light gray, close to white, causing poor contrast.

3. Final Answer:

   Text color is too light on white background, low contrast -> Option A

4. Quick Check:

   Light background needs darker text for readability [OK]

Hint: Check contrast: light background needs dark text [OK]

Common Mistakes:

• Ignoring contrast and choosing similar light colors
• Thinking hover prefix affects color pairing
• Confusing same color with low contrast

5. You want a button with a dark background and light text that changes to a light background with dark text on hover using Tailwind. Which class set is correct?

hard

A. bg-white text-black hover:bg-black hover:text-white

B. bg-gray-100 text-gray-800 hover:bg-gray-800 hover:text-gray-100

C. bg-gray-800 text-gray-100 hover:bg-gray-100 hover:text-gray-800

D. bg-black text-black hover:bg-white hover:text-white

Solution

1. Step 1: Identify dark background and light text classes

   bg-gray-800 is dark background, text-gray-100 is light text.

2. Step 2: Check hover classes for light background and dark text

   hover:bg-gray-100 is light background, hover:text-gray-800 is dark text, matching the requirement.

3. Final Answer:

   bg-gray-800 text-gray-100 hover:bg-gray-100 hover:text-gray-800 -> Option C

4. Quick Check:

   Dark bg + light text, hover reverses colors = bg-gray-800 text-gray-100 hover:bg-gray-100 hover:text-gray-800 [OK]

Hint: Hover classes reverse bg and text colors for effect [OK]

Common Mistakes:

• Swapping hover text and background colors incorrectly
• Using same colors for bg and text causing invisibility
• Forgetting to add hover: prefix