Tailwind CSS Course
Tailwind CSS
/
Intermediate

Dark Mode Setup

Definition

The configuration required in `tailwind.config.js` to dictate exactly HOW Tailwind decides whether the app is currently in Dark Mode or Light Mode.

Explain Like I'm New

By default, Tailwind looks at the user's Operating System (Windows/macOS settings). If Windows is dark, Tailwind is dark. However, if you want a physical 'Toggle Theme' button on your website, you must change Tailwind's setup to use the 'class' strategy instead.

Real World Example

Adding `darkMode: 'class'` to your config file so you can use JavaScript to slap a `<html class="dark">` tag onto your website when a user clicks the moon icon.

Common Use Cases

  • •App theming
  • •User preference toggles

Interactive Example

Loading...
Console output will appear here...

Interview Questions

basic

  • What is the default Dark Mode strategy in Tailwind CSS?

intermediate

  • If you use the 'class' strategy, which HTML element should you attach the `dark` class to?

Flash Cards

Question

Default strategy?

Click to reveal answer
Answer

The 'media' strategy (It listens to the `@media (prefers-color-scheme: dark)` CSS feature, matching the OS).

Question

Which HTML element?

Click to reveal answer
Answer

You should attach it to the very root of your document, either the `<html>` or `<body>` tag, so that every component inside the app inherits the dark mode state.