5 Tailwind1 with JSPublished 2026-10-05Free · no sign-up
Six dark mode patterns in Tailwind: lighter surfaces for elevation, a dashboard panel with a clear text hierarchy, a card switched by a dark: toggle, form fields for dark pages, a card that follows the system theme and a code window.
In dark interfaces, raised things get lighter rather than casting bigger shadows. Three slate steps from 950 to 700 show the page, a card and a menu on top, each one a little lighter than the layer below.
A dark stats panel with a clear text hierarchy: white for numbers, slate-300 for labels and slate-400 for hints, all above 4.5:1. Accent colours are lighter shades such as emerald-400, which read better on dark than the 600s.
One card written once with dark: variants, switched by a button that adds the dark class to its wrapper. The Tailwind config sets darkMode to class, so the theme follows the toggle instead of the operating system.
tailwind.config = { darkMode: 'class' };
var w = document.getElementById('twdm3'), b = document.getElementById('twdm3b');
b.onclick = function () { var on = w.classList.toggle('dark'); b.setAttribute('aria-pressed', on); };
04. Tailwind Dark Form Fields
TailwindDark modeForm
Inputs for dark pages: a slightly lighter field than the surface, a visible border, a readable placeholder and a bright focus ring. color-scheme: dark is set so native parts like the date picker turn dark too.
With Tailwind's default media strategy, dark: utilities follow the visitor's operating system setting through prefers-color-scheme. Switch your system to dark mode and this card changes with no script.
View code
<article class="w-full max-w-xs rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200 dark:bg-slate-900 dark:ring-white/10">
<p class="text-xs font-bold uppercase tracking-wider text-indigo-700 dark:text-indigo-300">Follows your system</p>
<h3 class="mt-1 font-bold text-slate-900 dark:text-white">Weekly summary</h3>
<p class="mt-1 text-sm text-slate-600 dark:text-slate-300">Switch your device to dark mode and this card switches too.</p>
</article>
06. Tailwind Dark Code Window
TailwindDark modeCode
A dark code window with traffic-light dots, a file name and colour-coded lines. The syntax colours are the 300 shades of the palette, which keep at least 4.5:1 against the near-black background.
By default, dark: follows the system through prefers-color-scheme. Set darkMode: 'class' in the config to switch with a class on a parent instead, for a manual toggle.
Elevation by lightness
In dark themes, raised layers get lighter: slate-950 for the page, 900 for cards, 800 for menus. Shadows barely show on dark.
Lighter accents
Use the 300 or 400 shades for links and accents on dark backgrounds; the 600s that work on white are too dark.
Native controls too
[color-scheme:dark] turns date pickers, scrollbars and other built-in parts dark to match.
Frequently asked questions
Should I remember the visitor's choice?
Yes. Save the toggle in localStorage and apply the class before the page paints to avoid a flash.
Is pure black a good background?
Very dark grey or slate is easier on the eyes and lets elevation show.