Syntax
background-color
Setting the background color of an element.
Overview
| Class | Declarations |
|---|---|
bg:<color> | background-color: <color>;
|
bg:transparent | background-color: transparent;
|
bg:current | background-color: currentColor;
|
bg:black | background-color: oklch(0% 0 none);
|
bg:white | background-color: oklch(100% 0 none);
|
bg:base | background-color: var(--color-base);
|
bg:invert | background-color: var(--color-invert);
|
bg:gray | background-color: var(--color-gray);
|
bg:slate | background-color: var(--color-slate);
|
bg:brown | background-color: var(--color-brown);
|
bg:orange | background-color: var(--color-orange);
|
bg:amber | background-color: var(--color-amber);
|
bg:yellow | background-color: var(--color-yellow);
|
bg:lime | background-color: var(--color-lime);
|
bg:green | background-color: var(--color-green);
|
bg:beryl | background-color: var(--color-beryl);
|
bg:teal | background-color: var(--color-teal);
|
bg:cyan | background-color: var(--color-cyan);
|
bg:sky | background-color: var(--color-sky);
|
bg:blue | background-color: var(--color-blue);
|
bg:indigo | background-color: var(--color-indigo);
|
bg:violet | background-color: var(--color-violet);
|
bg:purple | background-color: var(--color-purple);
|
bg:fuchsia | background-color: var(--color-fuchsia);
|
bg:pink | background-color: var(--color-pink);
|
bg:crimson | background-color: var(--color-crimson);
|
bg:red | background-color: var(--color-red);
|
bg:stone-0 | background-color: oklch(99% 0.0033 72);
|
bg:stone-5 | background-color: oklch(94.9% 0.0066 72);
|
bg:stone-10 | background-color: oklch(90.8% 0.0172 72);
|
bg:stone-20 | background-color: oklch(82.6% 0.0287 72);
|
bg:stone-30 | background-color: oklch(74.4% 0.04 72);
|
bg:stone-40 | background-color: oklch(66.2% 0.044 72);
|
bg:stone-50 | background-color: oklch(58% 0.045 72);
|
bg:stone-60 | background-color: oklch(49.8% 0.033 72);
|
bg:stone-70 | background-color: oklch(41.6% 0.0275 72);
|
bg:stone-80 | background-color: oklch(33.4% 0.022 72);
|
bg:stone-90 | background-color: oklch(25.2% 0.0105 72);
|
bg:stone-95 | background-color: oklch(21.1% 0.0079 72);
|
bg:stone-100 | background-color: oklch(17% 0.0053 72);
|
bg:gray-0 | background-color: oklch(98.48% 0 none);
|
bg:gray-5 | background-color: oklch(96.5% 0 none);
|
bg:gray-10 | background-color: oklch(90% 0 none);
|
bg:gray-20 | background-color: oklch(82% 0 none);
|
bg:gray-30 | background-color: oklch(73.5% 0 none);
|
bg:gray-40 | background-color: oklch(65% 0 none);
|
bg:gray-50 | background-color: oklch(55.2% 0 none);
|
bg:gray-60 | background-color: oklch(48% 0 none);
|
bg:gray-70 | background-color: oklch(39.5% 0 none);
|
bg:gray-80 | background-color: oklch(31% 0 none);
|
bg:gray-90 | background-color: oklch(23.5% 0 none);
|
bg:gray-95 | background-color: oklch(18.5% 0 none);
|
bg:gray-100 | background-color: oklch(14.5% 0 none);
|
bg:grey-0 | background-color: oklch(98.38% 0.0033 249.7);
|
bg:grey-5 | background-color: oklch(95.52% 0.0099 270);
|
bg:grey-10 | background-color: oklch(90% 0.014 272);
|
bg:grey-20 | background-color: oklch(82% 0.02 272);
|
bg:grey-30 | background-color: oklch(73.5% 0.027 272);
|
bg:grey-40 | background-color: oklch(65% 0.032 273);
|
bg:grey-50 | background-color: oklch(55.2% 0.035 273);
|
bg:grey-60 | background-color: oklch(48% 0.032 273);
|
bg:grey-70 | background-color: oklch(39.5% 0.027 273);
|
bg:grey-80 | background-color: oklch(31% 0.022 273);
|
bg:grey-90 | background-color: oklch(23.5% 0.016 273);
|
bg:grey-95 | background-color: oklch(18.5% 0.012 273);
|
bg:grey-100 | background-color: oklch(14.5% 0.009 273);
|
bg:slate-0 | background-color: oklch(98.07% 0.0092 257.1);
|
bg:slate-5 | background-color: oklch(96.15% 0.0181 267.3);
|
bg:slate-10 | background-color: oklch(90.16% 0.0352 268.2);
|
bg:slate-20 | background-color: oklch(82.16% 0.045 268.2);
|
bg:slate-30 | background-color: oklch(74.16% 0.069 268.2);
|
bg:slate-40 | background-color: oklch(63.99% 0.0804 266.1);
|
bg:slate-50 | background-color: oklch(55.43% 0.0949 263.4);
|
bg:slate-60 | background-color: oklch(45.03% 0.0817 265.9);
|
bg:slate-70 | background-color: oklch(39% 0.0702 263.9);
|
bg:slate-80 | background-color: oklch(32.14% 0.0604 264.8);
|
bg:slate-90 | background-color: oklch(27.33% 0.0536 264.8);
|
bg:slate-95 | background-color: oklch(21.5% 0.0573 267.4);
|
bg:slate-100 | background-color: oklch(17.5% 0.0688 267.4);
|
bg:brown-0 | background-color: oklch(97% 0.0161 47.15);
|
bg:brown-5 | background-color: oklch(95.48% 0.0229 34.84);
|
bg:brown-10 | background-color: oklch(88.65% 0.0606 33.36);
|
bg:brown-20 | background-color: oklch(81.37% 0.1065 33.59);
|
bg:brown-30 | background-color: oklch(74.39% 0.12 32.5);
|
bg:brown-40 | background-color: oklch(67.62% 0.12 32.5);
|
bg:brown-50 | background-color: oklch(61.9% 0.12 32.5);
|
bg:brown-60 | background-color: oklch(55.58% 0.12 32.5);
|
bg:brown-70 | background-color: oklch(49.11% 0.12 32.5);
|
bg:brown-80 | background-color: oklch(42.07% 0.12 32.5);
|
bg:brown-90 | background-color: oklch(35.11% 0.12 32.5);
|
bg:brown-95 | background-color: oklch(24.7% 0.0958 31.18);
|
bg:brown-100 | background-color: oklch(21.21% 0.0822 31.17);
|
bg:orange-0 | background-color: oklch(96.76% 0.0337 84.59);
|
bg:orange-5 | background-color: oklch(94.78% 0.0521 82.97);
|
bg:orange-10 | background-color: oklch(89.94% 0.0852 75.65);
|
bg:orange-20 | background-color: oklch(82.86% 0.1343 69.21);
|
bg:orange-30 | background-color: oklch(75.09% 0.179 58.39);
|
bg:orange-40 | background-color: oklch(71.4% 0.1941 48.13);
|
bg:orange-50 | background-color: oklch(66.61% 0.2247 36.66);
|
bg:orange-60 | background-color: oklch(61.68% 0.2388 31.22);
|
bg:orange-70 | background-color: oklch(53.53% 0.2196 29.23);
|
bg:orange-80 | background-color: oklch(46.33% 0.1901 29.23);
|
bg:orange-90 | background-color: oklch(36.63% 0.1503 29.23);
|
bg:orange-95 | background-color: oklch(25.4% 0.1042 29.23);
|
bg:orange-100 | background-color: oklch(21.44% 0.088 29.23);
|
bg:amber-0 | background-color: oklch(97.5% 0.051 98.98);
|
bg:amber-5 | background-color: oklch(96.24% 0.0716 98.08);
|
bg:amber-10 | background-color: oklch(93.46% 0.1082 95.78);
|
bg:amber-20 | background-color: oklch(88.25% 0.1592 91.33);
|
bg:amber-30 | background-color: oklch(86% 0.1633 86.92);
|
bg:amber-40 | background-color: oklch(83.04% 0.1701 81.13);
|
bg:amber-50 | background-color: oklch(79.4% 0.1709 71.06);
|
bg:amber-60 | background-color: oklch(73.31% 0.1784 56.52);
|
bg:amber-70 | background-color: oklch(63.23% 0.1757 46.71);
|
bg:amber-80 | background-color: oklch(53.09% 0.1677 39.66);
|
bg:amber-90 | background-color: oklch(42.68% 0.138 38.58);
|
bg:amber-95 | background-color: oklch(29.27% 0.0971 37.42);
|
bg:amber-100 | background-color: oklch(23.94% 0.0818 36.09);
|
bg:yellow-0 | background-color: oklch(98.86% 0.0591 107.4);
|
bg:yellow-5 | background-color: oklch(98.27% 0.0948 108);
|
bg:yellow-10 | background-color: oklch(97.31% 0.1645 109.1);
|
bg:yellow-20 | background-color: oklch(95.82% 0.207 108.4);
|
bg:yellow-30 | background-color: oklch(93.51% 0.1981 104.7);
|
bg:yellow-40 | background-color: oklch(91.5% 0.1909 101.1);
|
bg:yellow-50 | background-color: oklch(87.52% 0.1796 94.59);
|
bg:yellow-60 | background-color: oklch(82.02% 0.169 82.09);
|
bg:yellow-70 | background-color: oklch(72.04% 0.1592 66.98);
|
bg:yellow-80 | background-color: oklch(64.84% 0.1477 63.12);
|
bg:yellow-90 | background-color: oklch(52.17% 0.1199 62.19);
|
bg:yellow-95 | background-color: oklch(33.35% 0.083 54.56);
|
bg:yellow-100 | background-color: oklch(26.22% 0.0646 55.44);
|
bg:lime-0 | background-color: oklch(98.05% 0.0665 116);
|
bg:lime-5 | background-color: oklch(96.62% 0.1 121.2);
|
bg:lime-10 | background-color: oklch(95.06% 0.1566 121.5);
|
bg:lime-20 | background-color: oklch(92.45% 0.2251 126);
|
bg:lime-30 | background-color: oklch(87.79% 0.2261 126.9);
|
bg:lime-40 | background-color: oklch(82.22% 0.225 131.1);
|
bg:lime-50 | background-color: oklch(74.39% 0.2131 133.9);
|
bg:lime-60 | background-color: oklch(66.45% 0.195 135.3);
|
bg:lime-70 | background-color: oklch(58.7% 0.1769 136.7);
|
bg:lime-80 | background-color: oklch(51.46% 0.1612 138.7);
|
bg:lime-90 | background-color: oklch(44.54% 0.1437 140.1);
|
bg:lime-95 | background-color: oklch(29.84% 0.097 140.4);
|
bg:lime-100 | background-color: oklch(25.83% 0.0851 141.1);
|
bg:green-0 | background-color: oklch(97% 0.0508 145.7);
|
bg:green-5 | background-color: oklch(94.95% 0.0888 145.5);
|
bg:green-10 | background-color: oklch(92.05% 0.1473 145.7);
|
bg:green-20 | background-color: oklch(89.18% 0.2191 143.8);
|
bg:green-30 | background-color: oklch(84.3% 0.24 143.9);
|
bg:green-40 | background-color: oklch(77.68% 0.25 144.1);
|
bg:green-50 | background-color: oklch(72.41% 0.2464 142.5);
|
bg:green-60 | background-color: oklch(67.52% 0.2298 142.5);
|
bg:green-70 | background-color: oklch(58.66% 0.1996 142.5);
|
bg:green-80 | background-color: oklch(51.96% 0.1768 142.5);
|
bg:green-90 | background-color: oklch(44.03% 0.1498 142.5);
|
bg:green-95 | background-color: oklch(30.17% 0.1027 142.5);
|
bg:green-100 | background-color: oklch(26.35% 0.0897 142.5);
|
bg:beryl-0 | background-color: oklch(96.57% 0.05 163.7);
|
bg:beryl-5 | background-color: oklch(94.71% 0.0792 163.5);
|
bg:beryl-10 | background-color: oklch(91.87% 0.128 162.2);
|
bg:beryl-20 | background-color: oklch(90.33% 0.1569 161.2);
|
bg:beryl-30 | background-color: oklch(86.43% 0.2104 155.8);
|
bg:beryl-40 | background-color: oklch(82.49% 0.1978 156.6);
|
bg:beryl-50 | background-color: oklch(76.89% 0.1885 155.4);
|
bg:beryl-60 | background-color: oklch(69.77% 0.1794 153.1);
|
bg:beryl-70 | background-color: oklch(60.74% 0.1602 151.9);
|
bg:beryl-80 | background-color: oklch(54.36% 0.1421 152.3);
|
bg:beryl-90 | background-color: oklch(46.09% 0.1213 152);
|
bg:beryl-95 | background-color: oklch(30.39% 0.0888 147.6);
|
bg:beryl-100 | background-color: oklch(26.71% 0.0855 144.4);
|
bg:teal-0 | background-color: oklch(97.24% 0.0384 179.8);
|
bg:teal-5 | background-color: oklch(94.3% 0.0826 180.5);
|
bg:teal-10 | background-color: oklch(92.33% 0.1148 181.5);
|
bg:teal-20 | background-color: oklch(91.3% 0.1327 183.1);
|
bg:teal-30 | background-color: oklch(90.52% 0.1472 184.8);
|
bg:teal-40 | background-color: oklch(89.99% 0.1577 186.3);
|
bg:teal-50 | background-color: oklch(86.13% 0.1485 190.5);
|
bg:teal-60 | background-color: oklch(79.38% 0.1355 194.8);
|
bg:teal-70 | background-color: oklch(67.86% 0.1154 199.2);
|
bg:teal-80 | background-color: oklch(60.62% 0.1033 203.7);
|
bg:teal-90 | background-color: oklch(52.19% 0.0898 208.3);
|
bg:teal-95 | background-color: oklch(31.94% 0.0584 220.7);
|
bg:teal-100 | background-color: oklch(28.34% 0.0534 224.3);
|
bg:cyan-0 | background-color: oklch(97.47% 0.0367 196.6);
|
bg:cyan-5 | background-color: oklch(95.05% 0.0748 196);
|
bg:cyan-10 | background-color: oklch(92.28% 0.1122 196.9);
|
bg:cyan-20 | background-color: oklch(89.98% 0.1264 200.1);
|
bg:cyan-30 | background-color: oklch(87.28% 0.1376 204.3);
|
bg:cyan-40 | background-color: oklch(84.82% 0.1408 209.5);
|
bg:cyan-50 | background-color: oklch(81.54% 0.1453 216.7);
|
bg:cyan-60 | background-color: oklch(77.57% 0.1494 226.7);
|
bg:cyan-70 | background-color: oklch(70.27% 0.1509 235.9);
|
bg:cyan-80 | background-color: oklch(63.25% 0.1493 241.7);
|
bg:cyan-90 | background-color: oklch(52.16% 0.1354 246.4);
|
bg:cyan-95 | background-color: oklch(35.21% 0.0976 249.2);
|
bg:cyan-100 | background-color: oklch(30.27% 0.0847 249.6);
|
bg:sky-0 | background-color: oklch(97.39% 0.0232 209.4);
|
bg:sky-5 | background-color: oklch(94.65% 0.0448 212.1);
|
bg:sky-10 | background-color: oklch(90.51% 0.0725 216.5);
|
bg:sky-20 | background-color: oklch(86.58% 0.0902 224);
|
bg:sky-30 | background-color: oklch(77.94% 0.1431 228.4);
|
bg:sky-40 | background-color: oklch(72.24% 0.1626 239);
|
bg:sky-50 | background-color: oklch(67.09% 0.1828 248.5);
|
bg:sky-60 | background-color: oklch(62.09% 0.2077 255.4);
|
bg:sky-70 | background-color: oklch(55.12% 0.2483 261.6);
|
bg:sky-80 | background-color: oklch(49.98% 0.2769 263.8);
|
bg:sky-90 | background-color: oklch(40.76% 0.2499 264.2);
|
bg:sky-95 | background-color: oklch(28.37% 0.1946 265.1);
|
bg:sky-100 | background-color: oklch(25.85% 0.1768 265.4);
|
bg:blue-0 | background-color: oklch(97.5% 0.0175 219.7);
|
bg:blue-5 | background-color: oklch(93.53% 0.0381 231.3);
|
bg:blue-10 | background-color: oklch(90.01% 0.0564 236.1);
|
bg:blue-20 | background-color: oklch(81.69% 0.0975 246.5);
|
bg:blue-30 | background-color: oklch(72.87% 0.1468 249.3);
|
bg:blue-40 | background-color: oklch(64.31% 0.1921 258.5);
|
bg:blue-50 | background-color: oklch(58.22% 0.2279 263.9);
|
bg:blue-60 | background-color: oklch(51.83% 0.2687 266.1);
|
bg:blue-70 | background-color: oklch(46.26% 0.3057 266.7);
|
bg:blue-80 | background-color: oklch(42.89% 0.2907 266.3);
|
bg:blue-90 | background-color: oklch(39.4% 0.2629 268);
|
bg:blue-95 | background-color: oklch(28.64% 0.1893 269);
|
bg:blue-100 | background-color: oklch(25.46% 0.168 269.2);
|
bg:indigo-0 | background-color: oklch(97.1% 0.0138 257.2);
|
bg:indigo-5 | background-color: oklch(94.11% 0.0285 279.6);
|
bg:indigo-10 | background-color: oklch(87.83% 0.0595 274.4);
|
bg:indigo-20 | background-color: oklch(77.74% 0.1153 280.2);
|
bg:indigo-30 | background-color: oklch(70.2% 0.1611 282.9);
|
bg:indigo-40 | background-color: oklch(61.3% 0.218 284);
|
bg:indigo-50 | background-color: oklch(56.78% 0.2478 284.1);
|
bg:indigo-60 | background-color: oklch(50.06% 0.2906 282);
|
bg:indigo-70 | background-color: oklch(48.74% 0.2963 279.3);
|
bg:indigo-80 | background-color: oklch(48.25% 0.2976 277.4);
|
bg:indigo-90 | background-color: oklch(41.46% 0.2571 276.7);
|
bg:indigo-95 | background-color: oklch(29.36% 0.1799 278.3);
|
bg:indigo-100 | background-color: oklch(25.28% 0.1551 278.1);
|
bg:violet-0 | background-color: oklch(97.96% 0.0166 322.8);
|
bg:violet-5 | background-color: oklch(94.02% 0.0333 299.5);
|
bg:violet-10 | background-color: oklch(88.69% 0.0648 300.1);
|
bg:violet-20 | background-color: oklch(80.47% 0.113 297.7);
|
bg:violet-30 | background-color: oklch(71.63% 0.1722 298.7);
|
bg:violet-40 | background-color: oklch(62.1% 0.237 297.8);
|
bg:violet-50 | background-color: oklch(56.23% 0.2803 297.8);
|
bg:violet-60 | background-color: oklch(52.55% 0.293 292.4);
|
bg:violet-70 | background-color: oklch(51.12% 0.2931 287.9);
|
bg:violet-80 | background-color: oklch(48.43% 0.2798 286.7);
|
bg:violet-90 | background-color: oklch(40.64% 0.2331 287.9);
|
bg:violet-95 | background-color: oklch(28.51% 0.1631 288.3);
|
bg:violet-100 | background-color: oklch(24.44% 0.1403 287.8);
|
bg:purple-0 | background-color: oklch(97.07% 0.0259 325.8);
|
bg:purple-5 | background-color: oklch(94.28% 0.0394 314.4);
|
bg:purple-10 | background-color: oklch(89.13% 0.0771 314.7);
|
bg:purple-20 | background-color: oklch(81.4% 0.1318 312.8);
|
bg:purple-30 | background-color: oklch(72.72% 0.2007 312.8);
|
bg:purple-40 | background-color: oklch(63.36% 0.2677 310);
|
bg:purple-50 | background-color: oklch(58.21% 0.2988 307.2);
|
bg:purple-60 | background-color: oklch(55.59% 0.2952 301);
|
bg:purple-70 | background-color: oklch(54.45% 0.294 297.9);
|
bg:purple-80 | background-color: oklch(48.76% 0.264 297.5);
|
bg:purple-90 | background-color: oklch(39.15% 0.2105 298.7);
|
bg:purple-95 | background-color: oklch(27.95% 0.1488 300.5);
|
bg:purple-100 | background-color: oklch(24.3% 0.128 302.4);
|
bg:fuchsia-0 | background-color: oklch(97.07% 0.0259 325.8);
|
bg:fuchsia-5 | background-color: oklch(94.57% 0.0472 324.9);
|
bg:fuchsia-10 | background-color: oklch(89.9% 0.0935 326.3);
|
bg:fuchsia-20 | background-color: oklch(81.84% 0.1554 322);
|
bg:fuchsia-30 | background-color: oklch(74.78% 0.2085 319.1);
|
bg:fuchsia-40 | background-color: oklch(67.61% 0.25 316.5);
|
bg:fuchsia-50 | background-color: oklch(62.91% 0.25 316.7);
|
bg:fuchsia-60 | background-color: oklch(58.72% 0.25 311.8);
|
bg:fuchsia-70 | background-color: oklch(53.61% 0.25 312.8);
|
bg:fuchsia-80 | background-color: oklch(47.9% 0.2382 313.2);
|
bg:fuchsia-90 | background-color: oklch(38.62% 0.1895 315.8);
|
bg:fuchsia-95 | background-color: oklch(27.75% 0.1357 316.4);
|
bg:fuchsia-100 | background-color: oklch(23.7% 0.1162 315.9);
|
bg:pink-0 | background-color: oklch(97.07% 0.0259 325.8);
|
bg:pink-5 | background-color: oklch(94.74% 0.0465 326.5);
|
bg:pink-10 | background-color: oklch(88.85% 0.0902 332.8);
|
bg:pink-20 | background-color: oklch(81.57% 0.1379 341.6);
|
bg:pink-30 | background-color: oklch(74.68% 0.2018 342.5);
|
bg:pink-40 | background-color: oklch(69.18% 0.2455 347.6);
|
bg:pink-50 | background-color: oklch(65.84% 0.25 350.7);
|
bg:pink-60 | background-color: oklch(63.54% 0.25 359.2);
|
bg:pink-70 | background-color: oklch(58.95% 0.2377 2.647);
|
bg:pink-80 | background-color: oklch(53% 0.2126 6.362);
|
bg:pink-90 | background-color: oklch(43.66% 0.1748 8.099);
|
bg:pink-95 | background-color: oklch(31.48% 0.1261 7.759);
|
bg:pink-100 | background-color: oklch(27.42% 0.1098 8.521);
|
bg:crimson-0 | background-color: oklch(97.07% 0.0259 325.8);
|
bg:crimson-5 | background-color: oklch(94.2% 0.0332 353.2);
|
bg:crimson-10 | background-color: oklch(88.09% 0.0677 1.012);
|
bg:crimson-20 | background-color: oklch(80.33% 0.1184 4.549);
|
bg:crimson-30 | background-color: oklch(72.9% 0.1774 4.449);
|
bg:crimson-40 | background-color: oklch(66.41% 0.2325 8.311);
|
bg:crimson-50 | background-color: oklch(63.55% 0.25 15.3);
|
bg:crimson-60 | background-color: oklch(62.66% 0.25 21.21);
|
bg:crimson-70 | background-color: oklch(58.59% 0.2383 26.22);
|
bg:crimson-80 | background-color: oklch(53.32% 0.2169 26.29);
|
bg:crimson-90 | background-color: oklch(44.03% 0.1783 24.44);
|
bg:crimson-95 | background-color: oklch(31.73% 0.1287 25.13);
|
bg:crimson-100 | background-color: oklch(27.68% 0.1126 26.19);
|
bg:red-0 | background-color: oklch(96.63% 0.0166 17.2);
|
bg:red-5 | background-color: oklch(94.05% 0.0299 17.02);
|
bg:red-10 | background-color: oklch(87.16% 0.0687 17.78);
|
bg:red-20 | background-color: oklch(79.39% 0.119 18.78);
|
bg:red-30 | background-color: oklch(72.94% 0.1679 17.49);
|
bg:red-40 | background-color: oklch(64.7% 0.2399 19.91);
|
bg:red-50 | background-color: oklch(62.82% 0.25 28.59);
|
bg:red-60 | background-color: oklch(60.94% 0.2501 29.23);
|
bg:red-70 | background-color: oklch(57.58% 0.2363 29.23);
|
bg:red-80 | background-color: oklch(53.09% 0.2178 29.23);
|
bg:red-90 | background-color: oklch(44.45% 0.1824 29.23);
|
bg:red-95 | background-color: oklch(32.59% 0.1337 29.23);
|
bg:red-100 | background-color: oklch(28.54% 0.1171 29.23);
|
Basic usage
With opacity
Add the suffix /alpha to change the opacity of any color.
<div class="bg:pink/.15">…</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="bg:slate-10:hover bg:slate-10@sm bg:slate-10@dark bg:slate-10@print">…</div>