bg-<palette>-<shade> across all 22 palettes, with opacity modifiers bg-blue-500/50. This family contains 263 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
bg-slate-50--tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
bg-slate-100--tw-bg-opacity: 1; background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
bg-slate-200--tw-bg-opacity: 1; background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
bg-slate-300--tw-bg-opacity: 1; background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
bg-slate-400--tw-bg-opacity: 1; background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
bg-slate-500--tw-bg-opacity: 1; background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
bg-slate-600--tw-bg-opacity: 1; background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
bg-slate-700--tw-bg-opacity: 1; background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
bg-slate-800--tw-bg-opacity: 1; background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
bg-slate-900--tw-bg-opacity: 1; background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
bg-slate-950--tw-bg-opacity: 1; background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
bg-gray-50--tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
bg-gray-100--tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
bg-gray-200--tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
bg-gray-300--tw-bg-opacity: 1; background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
bg-gray-400--tw-bg-opacity: 1; background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
bg-gray-500--tw-bg-opacity: 1; background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
bg-gray-600--tw-bg-opacity: 1; background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
bg-gray-700--tw-bg-opacity: 1; background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
bg-gray-800--tw-bg-opacity: 1; background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
bg-gray-900--tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
bg-gray-950--tw-bg-opacity: 1; background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1));
bg-zinc-50--tw-bg-opacity: 1; background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
bg-zinc-100--tw-bg-opacity: 1; background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
bg-zinc-200--tw-bg-opacity: 1; background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
bg-zinc-300--tw-bg-opacity: 1; background-color: rgb(212 212 216 / var(--tw-bg-opacity, 1));
bg-zinc-400--tw-bg-opacity: 1; background-color: rgb(161 161 170 / var(--tw-bg-opacity, 1));
bg-zinc-500--tw-bg-opacity: 1; background-color: rgb(113 113 122 / var(--tw-bg-opacity, 1));
bg-zinc-600--tw-bg-opacity: 1; background-color: rgb(82 82 91 / var(--tw-bg-opacity, 1));
bg-zinc-700--tw-bg-opacity: 1; background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
bg-zinc-800--tw-bg-opacity: 1; background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
bg-zinc-900--tw-bg-opacity: 1; background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
bg-zinc-950--tw-bg-opacity: 1; background-color: rgb(9 9 11 / var(--tw-bg-opacity, 1));
bg-neutral-50--tw-bg-opacity: 1; background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
bg-neutral-100--tw-bg-opacity: 1; background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
bg-neutral-200--tw-bg-opacity: 1; background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
bg-neutral-300--tw-bg-opacity: 1; background-color: rgb(212 212 212 / var(--tw-bg-opacity, 1));
bg-neutral-400--tw-bg-opacity: 1; background-color: rgb(163 163 163 / var(--tw-bg-opacity, 1));
bg-neutral-500--tw-bg-opacity: 1; background-color: rgb(115 115 115 / var(--tw-bg-opacity, 1));
bg-neutral-600--tw-bg-opacity: 1; background-color: rgb(82 82 82 / var(--tw-bg-opacity, 1));
bg-neutral-700--tw-bg-opacity: 1; background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
bg-neutral-800--tw-bg-opacity: 1; background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
bg-neutral-900--tw-bg-opacity: 1; background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
bg-neutral-950--tw-bg-opacity: 1; background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
bg-stone-50--tw-bg-opacity: 1; background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
bg-stone-100--tw-bg-opacity: 1; background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1));
bg-stone-200--tw-bg-opacity: 1; background-color: rgb(231 229 228 / var(--tw-bg-opacity, 1));
bg-stone-300--tw-bg-opacity: 1; background-color: rgb(214 211 209 / var(--tw-bg-opacity, 1));
bg-stone-400--tw-bg-opacity: 1; background-color: rgb(168 162 158 / var(--tw-bg-opacity, 1));
bg-stone-500--tw-bg-opacity: 1; background-color: rgb(120 113 108 / var(--tw-bg-opacity, 1));
bg-stone-600--tw-bg-opacity: 1; background-color: rgb(87 83 78 / var(--tw-bg-opacity, 1));
bg-stone-700--tw-bg-opacity: 1; background-color: rgb(68 64 60 / var(--tw-bg-opacity, 1));
bg-stone-800--tw-bg-opacity: 1; background-color: rgb(41 37 36 / var(--tw-bg-opacity, 1));
bg-stone-900--tw-bg-opacity: 1; background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
bg-stone-950--tw-bg-opacity: 1; background-color: rgb(12 10 9 / var(--tw-bg-opacity, 1));
bg-red-50--tw-bg-opacity: 1; background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
bg-red-100--tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
bg-red-200--tw-bg-opacity: 1; background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
bg-red-300--tw-bg-opacity: 1; background-color: rgb(252 165 165 / var(--tw-bg-opacity, 1));
bg-red-400--tw-bg-opacity: 1; background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));

…and 203 more in this family — search by class name to find the exact one.

Example#

example
html
<div class="bg-blue-500 hover:bg-blue-600 transition">Surface</div>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • See colors/index|Colors for every palette
  • Opacity modifiers: bg-slate-900/50 = rgba at 50%

utilities/backgrounds/gradients|Gradients · colors/index|Colors