Background Color

Use bg-{color} utilities to set the background color of an element. Colors follow the Tailwind v4 default palette (bg-blue-500, bg-cyan-500, bg-pink-500, …), plus the standalone bg-black, bg-white, and bg-transparent.

Style('bg-blue-500 ...', child: Text('Button A'))
Style('bg-cyan-500 ...', child: Text('Button B'))
Style('bg-pink-500 ...', child: Text('Button C'))

Changing the opacity

Append /N (a percentage 0–100) to any color utility to adjust opacity:

Style('bg-sky-500/100 ...')
Style('bg-sky-500/75 ...')
Style('bg-sky-500/50 ...')

Applying on hover

The hover: variant swaps the background color on pointer hover:

Style('bg-indigo-500 hover:bg-fuchsia-500 ...', child: Text('Save changes'))

Using a custom value

Use bracket syntax for a color outside the palette:

Style('bg-[#50d71e]', child: /* ... */)

Beyond six-digit hex, the resolver accepts CSS short hex (bg-[#f00]), eight-digit #RRGGBBAA (alpha last), the rgb()/rgba()/hsl()/hsla() function forms, and the /N opacity modifier layered on top of an arbitrary hex:

Style('bg-[#0ea5e9]/50 ...', child: Text('Button'))

Class reference

Class	Description
bg-{color}-{shade}	Set background to a palette color (e.g. bg-blue-500).
bg-{color}-{shade}/{N}	Set background with N% opacity (e.g. bg-blue-500/50).
bg-transparent	Transparent background.
bg-black	Solid black.
bg-white	Solid white.
bg-[#RGB] / bg-[#RRGGBB]	Arbitrary hex color (3- or 6-digit).
bg-[#RGBA] / bg-[#RRGGBBAA]	Arbitrary hex with alpha (4- or 8-digit, CSS RRGGBBAA order).
bg-[rgb(...)] / bg-[rgba(...)]	Arbitrary RGB(A) color.
bg-[hsl(...)] / bg-[hsla(...)]	Arbitrary HSL(A) color.
bg-[#hex]/{N}	Arbitrary hex with an N% opacity modifier (e.g. bg-[#0ea5e9]/50).
hover:bg-{color}	Apply on hover. Same modifier rules apply (/N, etc.).