Use when adding, debugging, or migrating dark-mode support in a Tailwind project: choosing between the default `prefers-color-scheme` strategy and user-toggleable class or attribute strategies, wiring the JavaScript toggle, swapping CSS-variable token values for light vs dark, or porting v3 `darkMode` configuration to the v4 `@custom-variant dark` directive. Prevents the four canonical dark-mode failures: assuming `dark:` utilities need configuration before they work, leaving v3's `darkMode: 'class'` config in a v4 project (silently ignored), forgetting the v4 `@custom-variant dark` directive when migrating from v3 `darkMode: 'class'`, and shipping a toggle that flashes the wrong theme on first paint because the script runs after CSS. Covers: default `media` strategy, class-based toggling (v3 `darkMode: 'class'` and 'selector', v4 `@custom-variant dark (&:where(.dark, .dark *))`), attribute-based toggling (`[data-theme="dark"]`), custom variant strategies, theme-token swap via CSS variables, and the canonical JavaScript toggle snippet using `localStorage` plus `matchMedia`. Always shows v3 and v4 in side-by-side blocks; never fuses a single snippet that hides the version difference (per D-008). Keywords: dark mode, dark variant, dark:bg-, dark:text-, prefers-color-scheme, darkMode class, darkMode selector, custom-variant dark, where dark class, data-theme dark, toggle dark mode, localStorage theme, matchMedia, next-themes, light dark system, color scheme, how do I add dark mode, dark mode not working, dark utilities ignored, flash of wrong theme, FOUC, flash of unstyled content, OS dark mode, system theme, v3 to v4 dark mode migration, darkMode config removed.
About this skill (catalog notes)
Tailwind Syntax Dark Mode includes 18 code blocks for direct copy-paste. At roughly 1,769 words the SKILL.md is on the longer end of the catalog distribution.
License
MIT
Original author
Impertio-Studio
Indexed lastmod
Catalog position
Dev Tools · ide-editor
Indexed related skills
10
How Tailwind Syntax Dark Mode fits the catalog
Tailwind Syntax Dark Mode sits in the Dev Tools category under the ide-editor sub-topic in the ClaudSkills catalog. There are 10 related skills indexed alongside it; comparing a few before installing usually reveals which fits your workflow best.
These notes are auto-generated from features detected in the SKILL.md file and from this catalog's structure — they aren't part of the source repository.
From the source SKILL.md
Three strategies, four moving parts. ALWAYS pick a strategy first, then implement all four parts (CSS configuration, markup, toggle script, optional theme-token swap) consistently. NEVER mix v3 config syntax with v4 directive syntax in one project.
What this skill does
Tailwind Syntax Dark Mode is a community-contributed Claude Code skill in the ide-editor sub-category. It ships as a SKILL.md file that Claude Code auto-discovers under ~/.claude/skills/tailwind-syntax-dark-mode/ and loads when your prompt matches the skill's trigger.
When to invoke it: Use when adding, debugging, or migrating dark-mode support in a Tailwind project: choosing between the default `prefers-color-scheme` strategy and user-toggleable class or attribute strategies, wiring the JavaScript toggle, swapping CSS-variable token values for light vs dark, or porting v3 `darkMode` configuration to the v4 `@custom-variant dark` directive. Prevents the four canonical dark-mode failures: assuming `dark:` utilities need configuration before they work, leaving v3's `darkMode: 'class'` config in a v4 project (silently ignored), forgetting the v4 `@custom-variant dark` directive when migrating from v3 `darkMode: 'class'`, and shipping a toggle that flashes the wrong theme on first paint because the script runs after CSS.
Who uses this skill
The Tailwind Syntax Dark Mode Claude Code skill is built for developers, power users, and teams automating repetitive workflows and improving developer experience. It's part of ClaudSkills (also referred to as Claude Skills or Claude Code Skills) — the open community-curated registry of 116,000+ SKILL.md files for Anthropic's Claude Code agent and the wider Claude ecosystem (Claude API, Claude Agent SDK).
Or just download SKILL.md directly and drop it into ~/.claude/skills/tailwind-syntax-dark-mode/. Claude Code auto-discovers it on next session.
Skills live at ~/.claude/skills/tailwind-syntax-dark-mode/SKILL.md on macOS/Linux, or %USERPROFILE%\.claude\skills\tailwind-syntax-dark-mode\SKILL.md on Windows. See the full install guide for step-by-step instructions.
Telegram
📱 Install from your phone or desktop Telegram
Open @claudskills_bot on Telegram, tap Open Desktop App, and the desktop app installs this skill for you. Or share the bot link with a colleague — they get the same one-tap install. Learn more →
Pro
One-click install via the desktop app
The ClaudSkills desktop app installs any skill directly into ~/.claude/skills/ with one click — no terminal required. Pro starts at $9/mo or $149 lifetime.
Pro
For the full experience including quality scoring and one-click install features for each skill — upgrade to Pro.
How do I install the Tailwind Syntax Dark Mode Claude Code skill?
Install via the ClaudSkills desktop app (one click) or copy SKILL.md from the source repository to ~/.claude/skills/tailwind-syntax-dark-mode/SKILL.md and restart Claude Code. Both flows are detailed at claudskills.com/install/.
What does the Tailwind Syntax Dark Mode skill do?
Use when adding, debugging, or migrating dark-mode support in a Tailwind project: choosing between the default `prefers-color-scheme` strategy and user-toggleable class or attribute strategies, wiring the JavaScript toggle, swapping CSS-variable token values for light vs dark, or porting v3 `darkMode` configuration to the v4 `@custom-variant dark` directive. Prevents the four canonical dark-mode failures: assuming `dark:` utilities need configuration before they work, leaving v3's `darkMode: 'class'` config in a v4 project (silently ignored), forgetting the v4 `@custom-variant dark` directive when migrating from v3 `darkMode: 'class'`, and shipping a toggle that flashes the wrong theme on first paint because the script runs after CSS. Covers: default `media` strategy, class-based toggling (v3 `darkMode: 'class'` and 'selector', v4 `@custom-variant dark (&:where(.dark, .dark *))`), attribute-based toggling (`[data-theme="dark"]`), custom variant strategies, theme-token swap via CSS variables, and the canonical JavaScript toggle snippet using `localStorage` plus `matchMedia`. Always shows v3 and v4 in side-by-side blocks; never fuses a single snippet that hides the version difference (per D-008). Keywords: dark mode, dark variant, dark:bg-, dark:text-, prefers-color-scheme, darkMode class, darkMode selector, custom-variant dark, where dark class, data-theme dark, toggle dark mode, localStorage theme, matchMedia, next-themes, light dark system, color scheme, how do I add dark mode, dark mode not working, dark utilities ignored, flash of wrong theme, FOUC, flash of unstyled content, OS dark mode, system theme, v3 to v4 dark mode migration, darkMode config removed.
Is this skill free to install?
Yes. ClaudSkills is an open registry — every skill keeps its source repository's license, and manual install via copy is free. ClaudSkills Pro ($9/mo, $79/yr, or $149 one-time) adds one-click install via the desktop app and a multi-signal Quality Score.
When should I use the Tailwind Syntax Dark Mode skill?
Use Tailwind Syntax Dark Mode when your Claude Code task falls under the Dev Tools category — specifically in the ide editor area. Claude Code auto-discovers installed skills and invokes the right one based on the task description, so you can also ask Claude directly (e.g. "use Tailwind Syntax Dark Mode" or describe the task and let Claude pick). Browse related skills at /category/tools/.
What is a Claude Code skill and how does the Tailwind Syntax Dark Mode skill fit in?
A Claude Code skill is a SKILL.md file that lives under ~/.claude/skills/<name>/ and tells the Claude Code CLI agent how to perform a specific task (instructions, prompts, allowed tools). Skills are auto-discovered at session start. Tailwind Syntax Dark Mode is one of 67,000+ skills indexed in the open ClaudSkills catalog, classified under the Dev Tools category. Learn more at /learn/what-is-a-claude-skill/.
@misc{tailwind-syntax-dark-mode-2026,
author = {Impertio-Studio},
title = {Tailwind Syntax Dark Mode [Claude Code skill]},
year = {2026},
publisher = {ClaudSkills},
url = {https://claudskills.com/skills/tailwind-syntax-dark-mode/}
}
Embed this skill
Promote, attribute, or link this skill from your own README, blog post, or documentation. All three snippets are free to use — no sign-up, no API key. More distribution surfaces →
Claude™ is a trademark of Anthropic PBC. ClaudSkills (also referred to as Claude Skills or Claude Code Skills Catalog) is an independent community-curated registry of SKILL.md files, not affiliated with, endorsed by, or sponsored by Anthropic.
Install ClaudSkills — browse 70k+ skills offline, one tap from your home screen.