Tailwindmarkup~10 mins

Media-based dark mode strategy in Tailwind - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - Media-based dark mode strategy

[Load HTML] -> [Load Tailwind CSS] -> [Detect prefers-color-scheme media query] -> [Apply dark mode styles if matches] -> [Render page with correct colors]

The browser loads the HTML and Tailwind CSS, then checks the user's system preference for dark mode using the prefers-color-scheme media query. If dark mode is preferred, Tailwind applies the dark styles automatically before rendering the page.

Render Steps - 3 Steps

Code Added:<body class="bg-white text-black">

Before

[Blank white page]

(No text visible)

→

After

[White background]
[Black text]

Hello, Dark Mode!
This page changes colors based on your system theme.

The body background is white and text is black by default, so the page shows black text on white background.

🔧 Browser Action:Paint background and text colors

Code Sample

A simple page that uses Tailwind's dark mode classes with media strategy to switch background and text colors based on system preference.

Tailwind

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dark Mode Example</title>
  </head>
  <body class="bg-white text-black dark:bg-gray-900 dark:text-white">
    <main class="p-6">
      <h1 class="text-2xl font-bold">Hello, Dark Mode!</h1>
      <p>This page changes colors based on your system theme.</p>
    </main>
  </body>
</html>

Tailwind

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Tailwind automatically generates dark mode styles using media query */

/* Example classes used:
   bg-white (light background)
   text-black (light text)
   dark:bg-gray-900 (dark background)
   dark:text-white (dark text)
*/

Render Quiz - 3 Questions

Test your understanding

After applying step 2, what visual change do you see on the page?

ABackground changes to white and text changes to black

BBackground changes to dark gray and text changes to white

CNo visual change happens

DText becomes invisible

Common Confusions - 2 Topics

Why doesn't the dark mode style apply when I switch my system to dark mode?

The dark mode styles only apply if Tailwind is configured to use the 'media' strategy and the browser supports the prefers-color-scheme media query. Also, the dark: classes must be present on elements.

💡 Check that your body or root element has dark: classes and Tailwind config uses 'media' for dark mode.

Why do I see a flash of white before dark mode styles appear?

This happens because the browser first renders the default light styles before detecting the system preference and applying dark styles. This is normal but can be minimized with server-side rendering or JavaScript.

💡 Use server-side rendering or add a script to detect dark mode early to reduce flash.

Property Reference

Property	Value Applied	Effect	Common Use
dark:bg-gray-900	background-color: #111827	Changes background to dark gray in dark mode	Background color for dark theme
dark:text-white	color: #ffffff	Changes text color to white in dark mode	Text color for dark theme
bg-white	background-color: #ffffff	Default light background color	Background color for light theme
text-black	color: #000000	Default light text color	Text color for light theme
prefers-color-scheme	media query	Detects system dark or light mode preference	Triggers dark mode styles automatically

Concept Snapshot

Media-based dark mode uses the prefers-color-scheme media query. Tailwind's dark: prefix applies styles only when dark mode is active. Default styles apply for light mode. No JavaScript needed; browser handles detection. Use dark:bg-* and dark:text-* for background and text colors. Ensure Tailwind config uses 'media' strategy for this to work.