bg-inherit utility
The bg-inherit utility sets background-color to inherit.
Tailwind CSS · Utilities reference · all subjects
background-color
10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
bg-current utility
The bg-current utility sets background-color to currentColor.
bg-transparent utility
The bg-transparent utility sets background-color to transparent.
bg-{color} utilities from theme
Background color utilities are generated for each color in the theme using the pattern bg-{name}, which sets background-color to var(--color-{name}). For example, bg-blue-500 sets background-color: var(--color-blue-500).
bg-(<custom-property>) for arbitrary CSS variable
The bg-(<custom-property>) syntax allows setting background-color to an arbitrary CSS custom property by setting background-color: var(<custom-property>).
bg-[<value>] for arbitrary value
The bg-[<value>] syntax allows setting background-color to an arbitrary CSS value, outputting background-color: <value>.
Color opacity modifier for background-color
Background color utilities support color opacity modifiers using the slash syntax. For example, bg-sky-500/100, bg-sky-500/75, and bg-sky-500/50 apply different opacity levels to the background color.
State variants for background-color
State variants like hover can be applied to background-color utilities. For example, hover:bg-fuchsia-500 applies the background color on hover.
Responsive variants for background-color
Background-color utilities support responsive variants for targeting specific breakpoints. For example, sm:bg-green-500 applies a background color at the small breakpoint.
Theme customization for background-color
Background color utilities can be customized by modifying the color theme configuration.