Tailwind dark mode helper
Paste light-mode classes. This tool suggests dark:counterparts for a supported color/shadow subset (shade flipping + a few named mappings), then shows a rough light/dark preview. Fully browser-side.
Heuristic only — not a design system. Always review contrast and brand colors. Layout utilities are left unchanged on purpose.
Augmented output
Mapped · unsupported
Light / dark preview
Inline CSS approximation for common gray/blue/white/black tokens — not a live Tailwind build.
Mapping detail
→
Supported subset
About this tool
Shade flipping maps 50↔950, 100↔900, … sobg-gray-100 becomesdark:bg-gray-900. Named white/black and a few shadows have explicit rules. Existing dark:classes are kept. Hover/focus variants are preserved on the light token and prefixed onto the dark suggestion when applicable.
Enable dark mode in Tailwind with@custom-variant dark (&:where(.dark, .dark *));(v4) or darkMode: 'class' (v3). This tool does not configure your project.