# How to Handle Dark Mode with Tailwind dark: Variants in Stitch
> Learn to enable Tailwind dark mode in Stitch. Inject the dark class into your HTML element using the --html-class flag for seamless dark: variant activation during static HTML generation.
- Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills)
- Tags: how-to-guide
- Published: 2026-07-12
---
**Stitch's `stitch::extract-static-html` skill captures fully-rendered pages and enables Tailwind dark mode by injecting the `dark` class into the `` element via the `--html-class` flag, activating all `dark:` utilities during static HTML generation.**
The `google-labs-code/stitch-skills` repository provides a powerful static extraction capability through the `extract-static-html` skill. When working with Tailwind CSS in Stitch projects, you can generate static HTML that respects dark mode variants by leveraging a specific command-line flag designed to manipulate the HTML root element before capture.
## How the Extractor Handles Dark Mode
### The `--html-class` Flag
In [`plugins/stitch-design/skills/extract-static-html/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/extract-static-html/SKILL.md), the skill documents the `--html-class` flag as the primary mechanism for adding classes to the `` element. This solves the core requirement for Tailwind's `dark:` variants, which are only applied when a `dark` class is present on an ancestor element. When you run the snapshot script with `--html-class dark`, Stitch injects `class="dark"` into the `` tag before the page is captured, triggering all dark variant rules in the generated CSS.
### Auto-Detection of Tailwind Configuration
The extractor automatically locates `tailwind.config.{js,ts,mjs,cjs}` in your project root. According to the source implementation, the skill uses this configuration to generate the final CSS during extraction. For dark mode to work with the `--html-class` approach, your Tailwind config must use `darkMode: 'class'` rather than the media-query alternative.
## Configuring Your Project for Dark Mode
### Set Up Tailwind Configuration
Ensure your Tailwind configuration explicitly enables class-based dark mode:
```javascript
// tailwind.config.js
module.exports = {
darkMode: 'class', // Required for dark: variants to work via class
content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
background: 'var(--color-bg)',
},
},
},
plugins: [],
};
```
This configuration ensures that utilities like `dark:bg-gray-800` are generated as `.dark .dark\:bg-gray-800` selectors, which only activate when the `dark` class is present on an ancestor element.
### Run the Snapshot Script with Dark Mode Enabled
Execute the snapshot script located at [`plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts) with the `--html-class` flag:
```bash
npx tsx plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts \
--url http://localhost:5173/dashboard \
--output .stitch/dashboard.html \
--wait 2000 \
--html-class dark
```
The `--html-class dark` flag prepends the `dark` class to the `` element before the static snapshot is taken. This ensures that Tailwind's dark variant rules are active when the extractor inlines the CSS.
## Advanced Usage and Verification
### Combining Multiple Classes
You can combine `dark` with additional theme classes by passing space-separated values:
```bash
npx tsx plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts \
--url http://localhost:5173 \
--output .stitch/home.html \
--html-class "dark custom-theme"
```
Both `dark` and `custom-theme` are added to the `` tag, allowing you to toggle additional CSS variables or custom styling alongside Tailwind's dark mode.
### Verifying the Generated HTML
After extraction, inspect the static HTML to confirm the dark mode is properly configured:
```html
...
```
The inlined `