Background Color

Basic usage

Setting the background color

Control the background color of an element using the bg-{color} utilities.

<button className="**bg-indigo-500** ...">
  Save changes
</button>

Changing the opacity

Control the opacity of an element's background color using the color opacity modifier.

<button className="bg-sky-500**/100** ..."></button>
<button className="bg-sky-500**/75** ..."></button>
<button className="bg-sky-500**/50** ..."></button>

You can use any value defined in your opacity scale, or use arbitrary values if you need to deviate from your design tokens.

<div className="bg-sky-500**/[.06]** ..."></div>