Documentación offline Tailwind CSS main
/ ó ⌘K
por @raupulus

background-color

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página

CustomizingYourThemeColors, ResponsiveDesign, TargetingSpecificStates, UsingACustomValue, } from "@/components/content.tsx";

Clase Propiedades CSS
bg-inherit background-color: inherit;
bg-current background-color: currentColor;
bg-transparent background-color: transparent;
bg-(<custom-property>) background-color: var(<custom-property>);
bg-[<value>] background-color: <value>;

Examples#

Basic example#

Use utilities like bg-white, bg-indigo-500 and bg-transparent to control the background color of an element:

{

bg-blue-500

bg-cyan-500

bg-pink-500

}

<!-- [!code classes:bg-blue-500,bg-cyan-500,bg-pink-500] -->
<button class="bg-blue-500 ...">Button A</button>
<button class="bg-cyan-500 ...">Button B</button>
<button class="bg-pink-500 ...">Button C</button>

Changing the opacity#

Use the color opacity modifier to control the opacity of an element's background color:

{

bg-sky-500/100

bg-sky-500/75

bg-sky-500/50

}

<!-- [!code word:/100] -->
<!-- [!code word:/75] -->
<!-- [!code word:/50] -->
<button class="bg-sky-500/100 ..."></button>
<button class="bg-sky-500/75 ..."></button>
<button class="bg-sky-500/50 ..."></button>

Using a custom value#

Applying on hover#

{ }

<!-- [!code classes:hover:bg-fuchsia-500] -->
<button class="bg-indigo-500 hover:bg-fuchsia-500 ...">Save changes</button>

Responsive design#

Customizing your theme#