Dark variant usage in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the dark: variant in Tailwind CSS?

The dark: variant applies styles only when the user's system or website is in dark mode, allowing easy creation of dark theme designs.

beginner

How do you enable dark mode support in Tailwind CSS?

You enable dark mode by setting <code>darkMode: 'class'</code> or <code>darkMode: 'media'</code> in the <code>tailwind.config.js</code> file. <code>'class'</code> uses a CSS class like <code>dark</code> on the root element, while <code>'media'</code> uses the user's system preference.

beginner

Example: What does bg-white dark:bg-gray-900 do?

It sets the background color to white normally, but changes it to dark gray (#1a202c) when dark mode is active.

intermediate

Why use darkMode: 'class' instead of 'media'?

Using <code>'class'</code> lets you toggle dark mode manually by adding or removing the <code>dark</code> class on an element, giving more control than relying on system settings.

beginner

How can you test dark variant styles in the browser?

If using <code>darkMode: 'class'</code>, add the <code>dark</code> class to the <code>&lt;html&gt;</code> or <code>&lt;body&gt;</code> element in DevTools to see dark styles. For <code>'media'</code>, toggle your OS dark mode setting.

What does the Tailwind class dark:text-white do?

A Sets background color to white in dark mode

B Always sets text color to white

C Sets text color to white only in dark mode

D Disables text color in dark mode

The dark: prefix applies the style only when dark mode is active, so dark:text-white sets text color to white only in dark mode.

Which Tailwind config option enables toggling dark mode with a CSS class?

A darkMode: 'media'

B darkMode: 'class'

C darkMode: true

D darkMode: 'toggle'

Setting darkMode: 'class' allows you to toggle dark mode by adding or removing the dark class.

If you want a button to have a blue background normally and a dark blue background in dark mode, which is correct?

A <code>bg-blue-500 dark:bg-blue-900</code>

B <code>dark:bg-blue-500 bg-blue-900</code>

C <code>bg-blue-900 dark:bg-blue-500</code>

D <code>bg-blue-500 bg-blue-900</code>

The normal background is bg-blue-500, and dark:bg-blue-900 overrides it in dark mode.

How can you manually test dark mode styles if using darkMode: 'class'?

A Add <code>dark</code> class to <code>html</code> or <code>body</code> in DevTools

B Restart the browser

C Toggle OS dark mode setting

D Use a special dark mode browser

Adding the dark class manually in DevTools triggers dark styles when using darkMode: 'class'.

What happens if you use dark:bg-black but your config is darkMode: 'media' and your OS is in light mode?

A Background will be black

B Background will be transparent

C Background will flash black briefly

D Background will not change to black

With darkMode: 'media', dark styles apply only if the OS is in dark mode. Otherwise, they don't apply.

Explain how to use the dark variant in Tailwind CSS to create a dark mode style for a text element.

Think about configuration and how to write classes with dark:

Describe the difference between darkMode: 'class' and darkMode: 'media' in Tailwind CSS and when you might use each.

Consider control vs automatic behavior