bg-<palette>-<shade> — surfaces, fills, sections.

Syntax#

html
<section class="bg-slate-900 text-white">Deep surface</section>

All palettes apply#

Every palette in the colors/index|color system generates a bg-* class: the theme palettes of your chosen preset…

Patterns#

  • Page: bg-white dark:bg-slate-950
  • Sections alternate: bg-slate-50 dark:bg-slate-900
  • CTAs: dominant 500 → hover 600

colors/index|Color hub · concepts/dark-mode-strategies|Dark mode · accessibility/color-contrast|Contrast