Applies in dark scheme (class or media strategy).

Example#

html
<body class="bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100">

Stacking#

Prefix order is screens → variants → utility. These variants combine with every screen (xxs: xs: sm: md:…) and with each other.

Best practices#

  • Systematize: surfaces 950/900, text 100/300, borders 800
  • Read concepts/dark-mode-strategies|Dark mode strategies

Common mistakes#

  • Forgetting images/shadows in dark mode glares

variants/index|Variants hub · responsive/index|Responsive · utilities/index|Utilities