Tailwindmarkup~10 mins

Dark mode toggle with JavaScript in Tailwind - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - Dark mode toggle with JavaScript

[Load HTML] -> [Parse DOM] -> [Load Tailwind CSS] -> [Apply base styles] -> [JavaScript loads] -> [Add event listener to toggle button] -> [User clicks toggle] -> [Toggle dark class on <html>] -> [Repaint with dark styles]

The browser loads the HTML and CSS, applies the base light styles, then JavaScript adds a click event to the toggle button. When clicked, it toggles the 'dark' class on the root element, triggering Tailwind's dark mode styles to repaint the page.

Render Steps - 3 Steps

Code Added:<button id="toggle" aria-label="Toggle dark mode">Toggle Dark Mode</button>

Before

[Empty page]

→

After

[Toggle Dark Mode button]
[No content visible]

The toggle button appears on the page, ready for user interaction.

🔧 Browser Action:Creates button element in DOM and paints it

Code Sample

A button toggles dark mode by adding/removing the 'dark' class on <html>. The content background and text colors switch between light and dark styles.

Tailwind

<button id="toggle" aria-label="Toggle dark mode">Toggle Dark Mode</button>
<div class="bg-white dark:bg-gray-900 text-black dark:text-white p-4">
  <h1 class="text-2xl font-bold">Welcome!</h1>
  <p>This is a dark mode toggle example.</p>
</div>

Tailwind

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

/* Tailwind dark mode is enabled via 'class' strategy */

Render Quiz - 3 Questions

Test your understanding

After applying render_step 2, what colors do you see in the content box?

AWhite background with black text

BDark gray background with white text

CBlack background with white text

DTransparent background with black text

Common Confusions - 2 Topics

Why doesn't the dark mode styles apply immediately on page load?

Because the 'dark' class is not present on the <html> element initially. The dark styles only apply when JavaScript adds this class after the toggle button is clicked (see render_step 3).

💡 Dark mode styles need the 'dark' class on a parent element to activate.

Why does toggling the button change the whole page colors, not just the button?

Because the 'dark' class is toggled on the <html> element, which is a parent of all content. Tailwind's dark mode styles use this class to change colors globally (render_step 3).

💡 Toggle the 'dark' class on a high-level element to affect all children.

Property Reference

Property	Value Applied	Effect	Common Use
bg-white	background-color: white	Sets light background	Default light mode background
dark:bg-gray-900	background-color: #111827	Sets dark background when 'dark' class present	Dark mode background
text-black	color: black	Sets light text color	Default light mode text
dark:text-white	color: white	Sets dark text color when 'dark' class present	Dark mode text
p-4	padding: 1rem	Adds spacing inside the box	Content padding

Concept Snapshot

Dark mode toggle uses JavaScript to add/remove 'dark' class on <html>. Tailwind applies dark styles only when 'dark' class is present. Use 'dark:' prefix for styles active in dark mode. Toggle button triggers repaint with new colors. Default is light mode with white background and black text. Dark mode switches background to dark gray and text to white.