Backgrounds

Background Color

sz prop	Tailwind class	Preview
{ bg: 'blue-500' }	bg-blue-500
{ bg: 'white' }	bg-white
{ bg: 'transparent' }	bg-transparent
{ bg: 'inherit' }	bg-inherit
{ bg: 'current' }	bg-current
{ bg: '#333' }	bg-[#333]
{ bg: '--my-color' }	bg-(--my-color)
{ bg: { color: 'blue-500', op: 50 } }	bg-blue-500/50
{ bg: { color: '--my-color', op: 50 } }	bg-(--my-color)/50
{ bg: { color: 'blue-500', op: '78%' } }	bg-blue-500/[78%]

background color swatches — gradient to-br

violet

sky

emerald

{ bg: { { color: 'blue-500', op: 50 } } } — background with opacity

op-100

op-50

op-20

Background Image

sz prop	Tailwind class
{ bgImg: 'none' }	bg-none
{ bgImg: 'url(…)' }	bg-[url(…)]
{ bgImg: '--my-image' }	bg-(image:--my-image)

Gradients

Use the bgImg object syntax for gradients:

sz prop	Tailwind class
{ bgImg: { gradient: 'linear' } }	bg-linear-to-r
{ bgImg: { gradient: 'linear', dir: 'to-b' } }	bg-linear-to-b
{ bgImg: { gradient: 'linear', dir: 90 } }	bg-linear-90
{ bgImg: { gradient: 'linear', dir: 'to-r', in: 'hsl' } }	bg-linear-to-r/hsl
{ bgImg: { gradient: 'radial' } }	bg-radial
{ bgImg: { gradient: 'conic' } }	bg-conic
{ bgImg: { gradient: 'conic', dir: 180 } }	bg-conic-180
{ bgImg: 'repeating-linear-gradient(…)' }	bg-[repeating-linear-gradient(…)]

Gradient Color Stops

sz prop	Tailwind class	Preview
{ from: 'blue-500' }	from-blue-500
{ via: 'purple-500' }	via-purple-500
{ to: 'pink-500' }	to-pink-500
{ fromPos: 10 }	from-10%
{ viaPos: 50 }	via-50%
{ toPos: 90 }	to-90%

linear gradient left → right

linear gradient with via stop — blue → purple → pink

Background Position

sz prop	Tailwind class
{ bgPos: 'center' }	bg-center
{ bgPos: 'top' }	bg-top
{ bgPos: 'bottom' }	bg-bottom
{ bgPos: 'left' }	bg-left
{ bgPos: 'right' }	bg-right
{ bgPos: 'top-left' }	bg-top-left
{ bgPos: 'center top 1rem' }	bg-[center_top_1rem]
{ bgPos: '--bg-pos' }	bg-(--bg-pos)

Background Size

sz prop	Tailwind class
{ bgSize: 'cover' }	bg-cover
{ bgSize: 'contain' }	bg-contain
{ bgSize: 'auto' }	bg-auto
{ bgSize: 'auto 100px' }	bg-size-[auto_100px]
{ bgSize: '--bg-size' }	bg-size-(--bg-size)

Background Repeat

sz prop	Tailwind class
{ bgRepeat: 'repeat' }	bg-repeat
{ bgRepeat: 'no-repeat' }	bg-no-repeat
{ bgRepeat: 'x' }	bg-repeat-x
{ bgRepeat: 'y' }	bg-repeat-y
{ bgRepeat: 'space' }	bg-repeat-space
{ bgRepeat: 'round' }	bg-repeat-round

Background Attachment / Clip / Origin

sz prop	Tailwind class
{ bgAttach: 'fixed' }	bg-fixed
{ bgAttach: 'local' }	bg-local
{ bgAttach: 'scroll' }	bg-scroll
{ bgClip: 'text' }	bg-clip-text
{ bgClip: 'border' }	bg-clip-border
{ bgOrigin: 'border' }	bg-origin-border
{ bgOrigin: 'padding' }	bg-origin-padding

Examples

// Solid color with opacity
<div sz={{ bg: { color: 'blue-500', op: 20 } }} />

// Linear gradient
<div sz={{
  bgImg: { gradient: 'linear', dir: 'to-r' },
  from: 'blue-500',
  to: 'purple-600',
}} />

// Radial gradient with oklch interpolation
<div sz={{
  bgImg: { gradient: 'radial', in: 'oklch' },
  from: 'cyan-400',
  to: 'blue-700',
}} />

// Background image
<div sz={{
  bgImg: "url('/hero.jpg')",
  bgPos: 'center',
  bgSize: 'cover',
  h: 64,
}} />

// Gradient text
<h1 sz={{
  bgImg: { gradient: 'linear', dir: 'to-r' },
  from: 'blue-600',
  to: 'purple-600',
  bgClip: 'text',
  color: 'transparent',
}} />