Dark Mode with Class Toggle

Click the button below to toggle dark mode. This works by adding or removing the 'dark' class from the `<html>` tag.

This content area uses `dark:bg-gray-700` and `dark:text-gray-200`. It will change appearance when dark mode is toggled.

Gotcha: Configuration & Class Management

For the `dark:` variants (like `dark:bg-gray-900`) to work with a class-based toggle in a typical Tailwind CSS project, you MUST correctly configure it:

  1. `tailwind.config.js` Setting: You need to set `darkMode: 'class'` (or `darkMode: 'selector'`) in your `tailwind.config.js` file.
    Example: module.exports = { darkMode: 'class', content: [], theme: {}, plugins: [] };
    Without this configuration in a compiled project, Tailwind CSS would not generate the `dark:` prefixed utility classes that respond to the `.dark` class on an ancestor.
  2. JavaScript for Class Toggling: You need JavaScript to dynamically add or remove the "dark" class from the `<html>` element (or another configured selector). This example includes such a script below.

Note on CDN Usage: When using the Tailwind CSS CDN (as in this standalone HTML file), many utility classes, including `dark:` variants, are often pre-generated or generated on-the-fly. So, the `dark:` variants work here when the 'dark' class is applied by JavaScript, even without an explicit `tailwind.config.js`. However, in a real-world project with a build step, the tailwind.config.js setting is crucial.