Problem: Pure-CSS switch.

Solution#

html
<label class="inline-flex cursor-pointer items-center gap-3">
  <input type="checkbox" class="peer sr-only" />
  <span class="h-6 w-11 rounded-full bg-slate-300 transition peer-checked:bg-blue-600 after:absolute after:mt-0.5 after:ms-0.5 after:size-5 after:rounded-full after:bg-white after:transition peer-checked:after:translate-x-5 relative"></span>
</label>

Why this works#

peer-checked drives knob and track color with zero JS.

Variants#

  • Responsive: add screen prefixes to the core classes
  • Dark: pair each color utility with its dark: twin
  • Animated: add transition + a state variant for motion

cookbook/index|Cookbook index · utilities/index|Utilities reference · patterns/index|Layout patterns