Background Color

Utilities for controlling the background color of an element.

Class	CSS Output
`bg-red-50`	`background-color: var(--color-red-50); }`
`bg-blue-50`	`background-color: var(--color-blue-50); }`
`bg-green-50`	`background-color: var(--color-green-50); }`
`bg-gray-50`	`background-color: var(--color-gray-50); }`
`bg-[#ff0000]`	`background-color: #ff0000; }`
`bg-red-500/50`	`background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); }`

bg-red-50

background-color: var(--color-red-50);

bg-blue-50

background-color: var(--color-blue-50);

bg-green-50

background-color: var(--color-green-50);

bg-gray-50

background-color: var(--color-gray-50);

bg-[#ff0000]

background-color: #ff0000;

bg-red-500/50

background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);

Reference

MDN ↗