Style Macro Reference

Reference for the properties and values supported by React Spectrum style macro.

Colors

All Spectrum 2 color tokens are available across color properties (e.g., backgroundColor, color, borderColor).

The following values are available across all color properties.

gray-25

gray-50

gray-75

gray-100

gray-200

gray-300

gray-400

gray-500

gray-600

gray-700

gray-800

gray-900

gray-1000

blue-100

blue-200

blue-300

blue-400

blue-500

blue-600

blue-700

blue-800

blue-900

blue-1000

blue-1100

blue-1200

blue-1300

blue-1400

blue-1500

blue-1600

red-100

red-200

red-300

red-400

red-500

red-600

red-700

red-800

red-900

red-1000

red-1100

red-1200

red-1300

red-1400

red-1500

red-1600

orange-100

orange-200

orange-300

orange-400

orange-500

orange-600

orange-700

orange-800

orange-900

orange-1000

orange-1100

orange-1200

orange-1300

orange-1400

orange-1500

orange-1600

yellow-100

yellow-200

yellow-300

yellow-400

yellow-500

yellow-600

yellow-700

yellow-800

yellow-900

yellow-1000

yellow-1100

yellow-1200

yellow-1300

yellow-1400

yellow-1500

yellow-1600

chartreuse-100

chartreuse-200

chartreuse-300

chartreuse-400

chartreuse-500

chartreuse-600

chartreuse-700

chartreuse-800

chartreuse-900

chartreuse-1000

chartreuse-1100

chartreuse-1200

chartreuse-1300

chartreuse-1400

chartreuse-1500

chartreuse-1600

celery-100

celery-200

celery-300

celery-400

celery-500

celery-600

celery-700

celery-800

celery-900

celery-1000

celery-1100

celery-1200

celery-1300

celery-1400

celery-1500

celery-1600

green-100

green-200

green-300

green-400

green-500

green-600

green-700

green-800

green-900

green-1000

green-1100

green-1200

green-1300

green-1400

green-1500

green-1600

seafoam-100

seafoam-200

seafoam-300

seafoam-400

seafoam-500

seafoam-600

seafoam-700

seafoam-800

seafoam-900

seafoam-1000

seafoam-1100

seafoam-1200

seafoam-1300

seafoam-1400

seafoam-1500

seafoam-1600

cyan-100

cyan-200

cyan-300

cyan-400

cyan-500

cyan-600

cyan-700

cyan-800

cyan-900

cyan-1000

cyan-1100

cyan-1200

cyan-1300

cyan-1400

cyan-1500

cyan-1600

indigo-100

indigo-200

indigo-300

indigo-400

indigo-500

indigo-600

indigo-700

indigo-800

indigo-900

indigo-1000

indigo-1100

indigo-1200

indigo-1300

indigo-1400

indigo-1500

indigo-1600

purple-100

purple-200

purple-300

purple-400

purple-500

purple-600

purple-700

purple-800

purple-900

purple-1000

purple-1100

purple-1200

purple-1300

purple-1400

purple-1500

purple-1600

fuchsia-100

fuchsia-200

fuchsia-300

fuchsia-400

fuchsia-500

fuchsia-600

fuchsia-700

fuchsia-800

fuchsia-900

fuchsia-1000

fuchsia-1100

fuchsia-1200

fuchsia-1300

fuchsia-1400

fuchsia-1500

fuchsia-1600

magenta-100

magenta-200

magenta-300

magenta-400

magenta-500

magenta-600

magenta-700

magenta-800

magenta-900

magenta-1000

magenta-1100

magenta-1200

magenta-1300

magenta-1400

magenta-1500

magenta-1600

pink-100

pink-200

pink-300

pink-400

pink-500

pink-600

pink-700

pink-800

pink-900

pink-1000

pink-1100

pink-1200

pink-1300

pink-1400

pink-1500

pink-1600

turquoise-100

turquoise-200

turquoise-300

turquoise-400

turquoise-500

turquoise-600

turquoise-700

turquoise-800

turquoise-900

turquoise-1000

turquoise-1100

turquoise-1200

turquoise-1300

turquoise-1400

turquoise-1500

turquoise-1600

brown-100

brown-200

brown-300

brown-400

brown-500

brown-600

brown-700

brown-800

brown-900

brown-1000

brown-1100

brown-1200

brown-1300

brown-1400

brown-1500

brown-1600

silver-100

silver-200

silver-300

silver-400

silver-500

silver-600

silver-700

silver-800

silver-900

silver-1000

silver-1100

silver-1200

silver-1300

silver-1400

silver-1500

silver-1600

cinnamon-100

cinnamon-200

cinnamon-300

cinnamon-400

cinnamon-500

cinnamon-600

cinnamon-700

cinnamon-800

cinnamon-900

cinnamon-1000

cinnamon-1100

cinnamon-1200

cinnamon-1300

cinnamon-1400

cinnamon-1500

cinnamon-1600

Property	Values
`color`	`'accent' \| 'neutral' \| 'neutral-subdued' \| 'negative' \| 'disabled' \| 'heading' \| 'title' \| 'body' \| 'detail' \| 'code' \| 'auto' \| baseColors`
`backgroundColor`	'accent' \| 'accent-subtle' \| 'neutral' \| 'neutral-subdued' \| 'neutral-subtle' \| 'negative' \| 'negative-subtle' \| 'informative' \| 'informative-subtle' \| 'positive' \| 'positive-subtle' \| 'notice' \| 'notice-subtle' \| 'gray' \| 'gray-subtle' \| 'red' \| 'red-subtle' \| 'orange' \| 'orange-subtle' \| 'yellow' \| 'yellow-subtle' \| 'chartreuse' \| 'chartreuse-subtle' \| 'celery' \| 'celery-subtle' \| 'green' \| 'green-subtle' \| 'seafoam' \| 'seafoam-subtle' \| 'cyan' \| 'cyan-subtle' \| 'blue' \| 'blue-subtle' \| 'indigo' \| 'indigo-subtle' \| 'purple' \| 'purple-subtle' \| 'fuchsia' \| 'fuchsia-subtle' \| 'magenta' \| 'magenta-subtle' \| 'pink' \| 'pink-subtle' \| 'turquoise' \| 'turquoise-subtle' \| 'cinnamon' \| 'cinnamon-subtle' \| 'brown' \| 'brown-subtle' \| 'silver' \| 'silver-subtle' \| 'disabled' \| 'base' \| 'layer-1' \| 'layer-2' \| 'pasteboard' \| 'elevated' \| baseColors
`borderColor`	`'negative' \| 'disabled' \| baseColors`
`outlineColor`	`'focus-ring' \| baseColors`
`fill`	`'none' \| 'currentColor' \| 'accent' \| 'neutral' \| 'negative' \| 'informative' \| 'positive' \| 'notice' \| 'gray' \| 'red' \| 'orange' \| 'yellow' \| 'chartreuse' \| 'celery' \| 'green' \| 'seafoam' \| 'cyan' \| 'blue' \| 'indigo' \| 'purple' \| 'fuchsia' \| 'magenta' \| 'pink' \| 'turquoise' \| 'cinnamon' \| 'brown' \| 'silver' \| baseColors`
`stroke`	`'none' \| 'currentColor' \| baseColors`

Dimensions

Spacing props like margin and padding accept values on a 4px grid. These are specified in px and get converted to rem. In addition to numbers, these named options are available:

edge-to-text – default spacing between the edge of a control and its text. Relative to control height.
pill – default spacing between the edge of a pill-shaped control and its text. Relative to control height.
text-to-control – default spacing between text and a control (e.g., label and input). Scales with font size.
text-to-visual – default spacing between text and a visual element (e.g., icon). Scales with font size.

Size props like width and height accept arbitrary pixel values. Values are converted to rem and multiplied by 1.25x on touch devices to increase hit targets.

Property	Values
`borderSpacing`	`baseSpacing`
`flexBasis`	`'auto' \| 'full' \| number \| LengthPercentage`
`rowGap`	`text-to-control \| text-to-visual \| edge-to-text \| pill \| baseSpacing`
`columnGap`	`text-to-control \| text-to-visual \| edge-to-text \| pill \| baseSpacing`
`height`	`'auto' \| 'full' \| 'min' \| 'max' \| 'fit' \| 'screen' \| number \| LengthPercentage`
`width`	`'auto' \| 'full' \| 'min' \| 'max' \| 'fit' \| 'screen' \| number \| LengthPercentage`
`containIntrinsicWidth`	`'auto' \| 'full' \| 'min' \| 'max' \| 'fit' \| 'screen' \| number \| LengthPercentage`
`containIntrinsicHeight`	`'auto' \| 'full' \| 'min' \| 'max' \| 'fit' \| 'screen' \| number \| LengthPercentage`
`minHeight`	`'auto' \| 'full' \| 'min' \| 'max' \| 'fit' \| 'screen' \| number \| LengthPercentage`
`maxHeight`	`'auto' \| 'full' \| 'min' \| 'max' \| 'fit' \| 'screen' \| 'none' \| number \| LengthPercentage`
`minWidth`	`'auto' \| 'full' \| 'min' \| 'max' \| 'fit' \| 'screen' \| number \| LengthPercentage`
`maxWidth`	`'auto' \| 'full' \| 'min' \| 'max' \| 'fit' \| 'screen' \| 'none' \| number \| LengthPercentage`
`borderStartWidth`	`'0' \| '1' \| '2' \| '4'`
`borderEndWidth`	`'0' \| '1' \| '2' \| '4'`
`borderTopWidth`	`'0' \| '1' \| '2' \| '4'`
`borderBottomWidth`	`'0' \| '1' \| '2' \| '4'`
`borderStyle`	`'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'hidden' \| 'none'`
`strokeWidth`	`'0' \| '1' \| '2'`
`marginStart`	`'auto' \| baseSpacing \| negativeSpacing \| LengthPercentage`
`marginEnd`	`'auto' \| baseSpacing \| negativeSpacing \| LengthPercentage`
`marginTop`	`'auto' \| baseSpacing \| negativeSpacing \| LengthPercentage`
`marginBottom`	`'auto' \| baseSpacing \| negativeSpacing \| LengthPercentage`
`paddingStart`	`text-to-control \| text-to-visual \| edge-to-text \| pill \| baseSpacing \| LengthPercentage`
`paddingEnd`	`text-to-control \| text-to-visual \| edge-to-text \| pill \| baseSpacing \| LengthPercentage`
`paddingTop`	`text-to-control \| text-to-visual \| edge-to-text \| pill \| baseSpacing \| LengthPercentage`
`paddingBottom`	`text-to-control \| text-to-visual \| edge-to-text \| pill \| baseSpacing \| LengthPercentage`
`scrollMarginStart`	`baseSpacing`
`scrollMarginEnd`	`baseSpacing`
`scrollMarginTop`	`baseSpacing`
`scrollMarginBottom`	`baseSpacing`
`scrollPaddingStart`	`baseSpacing`
`scrollPaddingEnd`	`baseSpacing`
`scrollPaddingTop`	`baseSpacing`
`scrollPaddingBottom`	`baseSpacing`
`textIndent`	`baseSpacing \| LengthPercentage`
`translateX`	`'full' \| baseSpacing \| negativeSpacing \| LengthPercentage`
`translateY`	`'full' \| baseSpacing \| negativeSpacing \| LengthPercentage`
`rotate`	`number \| '${number}deg' \| '${number}rad' \| '${number}grad' \| '${number}turn'`
Accepts a number (treated as degrees) or a string with units (deg, rad, grad, turn).
`scaleX`	`number \| '${number}%'`
Accepts a number or percentage string.
`scaleY`	`number \| '${number}%'`
Accepts a number or percentage string.
`transform`	`string`
`position`	`'absolute' \| 'fixed' \| 'relative' \| 'sticky' \| 'static'`
`insetStart`	`'auto' \| 'full' \| baseSpacing \| negativeSpacing \| LengthPercentage`
`insetEnd`	`'auto' \| 'full' \| baseSpacing \| negativeSpacing \| LengthPercentage`
`top`	`'auto' \| 'full' \| baseSpacing \| negativeSpacing \| LengthPercentage`
`left`	`'auto' \| 'full' \| baseSpacing \| negativeSpacing \| LengthPercentage`
`bottom`	`'auto' \| 'full' \| baseSpacing \| negativeSpacing \| LengthPercentage`
`right`	`'auto' \| 'full' \| baseSpacing \| negativeSpacing \| LengthPercentage`
`aspectRatio`	`'auto' \| 'square' \| 'video' \| 'number / number'`
Also accepts a ratio in the format number/number (e.g., 16/9, 4/3).

Text

Spectrum 2 typography can be applied via the font shorthand, which sets fontFamily, fontSize, fontWeight, lineHeight, and color. You can override any of these individually.

<main>
  <h1 className={style({font: 'heading-xl'})}>Heading</h1>
  <p className={style({font: 'body'})}>Body</p>
  <ul className={style({font: 'body-sm', fontWeight: 'bold'})}>
    <li>List item</li>
  </ul>
</main>

Type scales include: UI, Body, Heading, Title, Detail, and Code. Each scale has a default and additional t-shirt sizes (e.g., ui-sm, heading-2xl, code-xl).

There are several different type scales.

UI – use within interactive UI components.
Body – use for the content of pages that are primarily text.
Heading – use for headings in content pages.
Title – use for titles within UI components such as cards or panels.
Detail – use for less important metadata.
Code – use for source code.

Each type scale has a default size, and several t-shirt size modifiers for additional sizes.

ui-xs
ui-sm
ui
ui-lg
ui-xl
ui-2xl
ui-3xl

body-2xs
body-xs
body-sm
body
body-lg
body-xl
body-2xl
body-3xl

heading-2xs
heading-xs
heading-sm
heading
heading-lg
heading-xl
heading-2xl
heading-3xl

title-xs
title-sm
title
title-lg
title-xl
title-2xl
title-3xl

detail-sm
detail
detail-lg
detail-xl

code-sm
code
code-lg
code-xl

Property	Values
`fontFamily`	`'sans' \| 'serif' \| 'code'`
`fontSize`	`'ui-xs' \| 'ui-sm' \| 'ui' \| 'ui-lg' \| 'ui-xl' \| 'ui-2xl' \| 'ui-3xl' \| 'heading-2xs' \| 'heading-xs' \| 'heading-sm' \| 'heading' \| 'heading-lg' \| 'heading-xl' \| 'heading-2xl' \| 'heading-3xl' \| 'title-xs' \| 'title-sm' \| 'title' \| 'title-lg' \| 'title-xl' \| 'title-2xl' \| 'title-3xl' \| 'body-2xs' \| 'body-xs' \| 'body-sm' \| 'body' \| 'body-lg' \| 'body-xl' \| 'body-2xl' \| 'body-3xl' \| 'detail-sm' \| 'detail' \| 'detail-lg' \| 'detail-xl' \| 'code-xs' \| 'code-sm' \| 'code' \| 'code-lg' \| 'code-xl'`
`fontWeight`	`'normal' \| 'medium' \| 'bold' \| 'extra-bold' \| 'black' \| 'heading' \| 'title' \| 'detail'`
`lineHeight`	`'ui' \| 'heading' \| 'title' \| 'body' \| 'detail' \| 'code'`
`listStyleType`	`'none' \| 'disc' \| 'decimal'`
`listStylePosition`	`'inside' \| 'outside'`
`textTransform`	`'uppercase' \| 'lowercase' \| 'capitalize' \| 'none'`
`textAlign`	`'start' \| 'center' \| 'end' \| 'justify'`
`verticalAlign`	`'baseline' \| 'top' \| 'middle' \| 'bottom' \| 'text-top' \| 'text-bottom' \| 'sub' \| 'super'`
`textDecoration`	`'none' \| 'underline' \| 'overline' \| 'line-through'`
`textOverflow`	`'ellipsis' \| 'clip'`
`lineClamp`	`number`
`hyphens`	`'none' \| 'manual' \| 'auto'`
`whiteSpace`	`'normal' \| 'nowrap' \| 'pre' \| 'pre-line' \| 'pre-wrap' \| 'break-spaces'`
`textWrap`	`'wrap' \| 'nowrap' \| 'balance' \| 'pretty'`
`wordBreak`	`'normal' \| 'break-all' \| 'keep-all' \| 'break-word'`
`overflowWrap`	`'normal' \| 'anywhere' \| 'break-word'`
`boxDecorationBreak`	`'slice' \| 'clone'`

Effects

Property	Values
`boxShadow`	`'emphasized' \| 'elevated' \| 'dragged' \| 'none'`
`filter`	`'emphasized' \| 'elevated' \| 'dragged' \| 'none'`
`borderTopStartRadius`	`'none' \| 'sm' \| 'default' \| 'lg' \| 'xl' \| 'full' \| 'pill'`
`borderTopEndRadius`	`'none' \| 'sm' \| 'default' \| 'lg' \| 'xl' \| 'full' \| 'pill'`
`borderBottomStartRadius`	`'none' \| 'sm' \| 'default' \| 'lg' \| 'xl' \| 'full' \| 'pill'`
`borderBottomEndRadius`	`'none' \| 'sm' \| 'default' \| 'lg' \| 'xl' \| 'full' \| 'pill'`
`forcedColorAdjust`	`'auto' \| 'none'`
`colorScheme`	`'light' \| 'dark' \| 'light dark'`
`backgroundImage`	`string \| 'LinearGradient'`
`backgroundPosition`	`'bottom' \| 'center' \| 'left' \| 'left bottom' \| 'left top' \| 'right' \| 'right bottom' \| 'right top' \| 'top'`
`backgroundSize`	`'auto' \| 'cover' \| 'contain'`
`backgroundAttachment`	`'fixed' \| 'local' \| 'scroll'`
`backgroundClip`	`'border-box' \| 'padding-box' \| 'content-box' \| 'text'`
`backgroundRepeat`	`'repeat' \| 'no-repeat' \| 'repeat-x' \| 'repeat-y' \| 'round' \| 'space'`
`backgroundOrigin`	`'border-box' \| 'padding-box' \| 'content-box'`
`backgroundBlendMode`	`'normal' \| 'multiply' \| 'screen' \| 'overlay' \| 'darken' \| 'lighten' \| 'color-dodge' \| 'color-burn' \| 'hard-light' \| 'soft-light' \| 'difference' \| 'exclusion' \| 'hue' \| 'saturation' \| 'color' \| 'luminosity'`
`mixBlendMode`	`'normal' \| 'multiply' \| 'screen' \| 'overlay' \| 'darken' \| 'lighten' \| 'color-dodge' \| 'color-burn' \| 'hard-light' \| 'soft-light' \| 'difference' \| 'exclusion' \| 'hue' \| 'saturation' \| 'color' \| 'luminosity' \| 'plus-darker' \| 'plus-lighter'`
`opacity`	`number`
`outlineStyle`	`'none' \| 'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'inset'`
`outlineOffset`	`number`
`outlineWidth`	`'0' \| '1' \| '2' \| '4'`
`transition`	`'default' \| 'colors' \| 'opacity' \| 'shadow' \| 'transform' \| 'all' \| 'none'`
`transitionDelay`	`string \| number`
`transitionDuration`	`string \| number`
`transitionTimingFunction`	`'default' \| 'linear' \| 'in' \| 'out' \| 'in-out'`
`animation`	`string`
`animationDuration`	`string \| number`
`animationDelay`	`string \| number`
`animationDirection`	`'normal' \| 'reverse' \| 'alternate' \| 'alternate-reverse'`
`animationFillMode`	`'none' \| 'forwards' \| 'backwards' \| 'both'`
`animationIterationCount`	`string \| number`
`animationTimingFunction`	`'default' \| 'linear' \| 'in' \| 'out' \| 'in-out'`
`animationPlayState`	`'paused' \| 'running'`

Layout

Property	Values
`display`	`'block' \| 'inline-block' \| 'inline' \| 'flex' \| 'inline-flex' \| 'grid' \| 'inline-grid' \| 'contents' \| 'list-item' \| 'none'`
`alignContent`	`'normal' \| 'center' \| 'start' \| 'end' \| 'space-between' \| 'space-around' \| 'space-evenly' \| 'baseline' \| 'stretch'`
`alignItems`	`'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'`
`justifyContent`	`'normal' \| 'start' \| 'end' \| 'center' \| 'space-between' \| 'space-around' \| 'space-evenly' \| 'stretch'`
`justifyItems`	`'start' \| 'end' \| 'center' \| 'stretch'`
`alignSelf`	`'auto' \| 'start' \| 'end' \| 'center' \| 'stretch' \| 'baseline'`
`justifySelf`	`'auto' \| 'start' \| 'end' \| 'center' \| 'stretch'`
`flexDirection`	`'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`
`flexWrap`	`'wrap' \| 'wrap-reverse' \| 'nowrap'`
`flexShrink`	`number`
`flexGrow`	`number`
`gridColumnStart`	`string`
`gridColumnEnd`	`string`
`gridRowStart`	`string`
`gridRowEnd`	`string`
`gridAutoFlow`	`'row' \| 'column' \| 'dense' \| 'row dense' \| 'column dense'`
`gridAutoRows`	`'auto' \| 'min-content' \| 'max-content' \| '${number}fr' \| 'minmax(${string}, ${string})' \| string \| baseSpacing`
`gridAutoColumns`	`'auto' \| 'min-content' \| 'max-content' \| '${number}fr' \| 'minmax(${string}, ${string})' \| string \| baseSpacing`
`gridTemplateColumns`	`'auto' \| 'min-content' \| 'max-content' \| '${number}fr' \| 'minmax(${string}, ${string})' \| 'none' \| 'subgrid' \| string \| baseSpacing`
`gridTemplateRows`	`'auto' \| 'min-content' \| 'max-content' \| '${number}fr' \| 'minmax(${string}, ${string})' \| 'none' \| 'subgrid' \| string \| baseSpacing`
`gridTemplateAreas`	`'string[]'`
`float`	`'inline-start' \| 'inline-end' \| 'right' \| 'left' \| 'none'`
`clear`	`'inline-start' \| 'inline-end' \| 'left' \| 'right' \| 'both' \| 'none'`
`contain`	`'none' \| 'strict' \| 'content' \| 'size' \| 'inline-size' \| 'layout' \| 'style' \| 'paint'`
`boxSizing`	`'border-box' \| 'content-box'`
`tableLayout`	`'auto' \| 'fixed'`
`captionSide`	`'top' \| 'bottom'`
`borderCollapse`	`'collapse' \| 'separate'`
`breakBefore`	`'auto' \| 'avoid' \| 'all' \| 'avoid-page' \| 'page' \| 'left' \| 'right' \| 'column'`
`breakInside`	`'auto' \| 'avoid' \| 'avoid-page' \| 'avoid-column'`
`breakAfter`	`'auto' \| 'avoid' \| 'all' \| 'avoid-page' \| 'page' \| 'left' \| 'right' \| 'column'`
`overflowX`	`'auto' \| 'hidden' \| 'clip' \| 'visible' \| 'scroll'`
`overflowY`	`'auto' \| 'hidden' \| 'clip' \| 'visible' \| 'scroll'`
`overscrollBehaviorX`	`'auto' \| 'contain' \| 'none'`
`overscrollBehaviorY`	`'auto' \| 'contain' \| 'none'`
`scrollBehavior`	`'auto' \| 'smooth'`
`order`	`number`

Misc

Property	Values
`pointerEvents`	`'none' \| 'auto'`
`touchAction`	`'auto' \| 'none' \| 'pan-x' \| 'pan-y' \| 'manipulation' \| 'pinch-zoom'`
`userSelect`	`'none' \| 'text' \| 'all' \| 'auto'`
`visibility`	`'visible' \| 'hidden' \| 'collapse'`
`isolation`	`'isolate' \| 'auto'`
`transformOrigin`	`'center' \| 'top' \| 'top right' \| 'right' \| 'bottom right' \| 'bottom' \| 'bottom left' \| 'left' \| 'top right'`
`cursor`	`'auto' \| 'default' \| 'pointer' \| 'wait' \| 'text' \| 'move' \| 'help' \| 'not-allowed' \| 'none' \| 'context-menu' \| 'progress' \| 'cell' \| 'crosshair' \| 'vertical-text' \| 'alias' \| 'copy' \| 'no-drop' \| 'grab' \| 'grabbing' \| 'all-scroll' \| 'col-resize' \| 'row-resize' \| 'n-resize' \| 'e-resize' \| 's-resize' \| 'w-resize' \| 'ne-resize' \| 'nw-resize' \| 'se-resize' \| 'ew-resize' \| 'ns-resize' \| 'nesw-resize' \| 'nwse-resize' \| 'zoom-in' \| 'zoom-out'`
`resize`	`'none' \| 'vertical' \| 'horizontal' \| 'both'`
`scrollSnapType`	`'x' \| 'y' \| 'both' \| 'x mandatory' \| 'y mandatory' \| 'both mandatory'`
`scrollSnapAlign`	`'start' \| 'end' \| 'center' \| 'none'`
`scrollSnapStop`	`'normal' \| 'always'`
`appearance`	`'none' \| 'auto'`
`objectFit`	`'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'`
`objectPosition`	`'bottom' \| 'center' \| 'left' \| 'left bottom' \| 'left top' \| 'right' \| 'right bottom' \| 'right top' \| 'top'`
`willChange`	`'auto' \| 'scroll-position' \| 'contents' \| 'transform'`
`zIndex`	`number`
`disableTapHighlight`	`'true'`
`unicodeBidi`	`'normal' \| 'embed' \| 'bidi-override' \| 'isolate' \| 'isolate-override' \| 'plaintext'`
`caretColor`	`'auto' \| 'transparent'`

Shorthands

Shorthands apply their provided value to commonly grouped properties.

Property	Values	Mapping
`padding`	`text-to-control \| text-to-visual \| edge-to-text \| pill \| baseSpacing \| LengthPercentage`	`paddingTop, paddingBottom, paddingStart, paddingEnd`
`paddingX`	`text-to-control \| text-to-visual \| edge-to-text \| pill \| baseSpacing \| LengthPercentage`	`paddingStart, paddingEnd`
`paddingY`	`text-to-control \| text-to-visual \| edge-to-text \| pill \| baseSpacing \| LengthPercentage`	`paddingTop, paddingBottom`
`margin`	`'auto' \| baseSpacing \| negativeSpacing \| LengthPercentage`	`marginTop, marginBottom, marginStart, marginEnd`
`marginX`	`'auto' \| baseSpacing \| negativeSpacing \| LengthPercentage`	`marginStart, marginEnd`
`marginY`	`'auto' \| baseSpacing \| negativeSpacing \| LengthPercentage`	`marginTop, marginBottom`
`scrollPadding`	`baseSpacing`	`scrollPaddingTop, scrollPaddingBottom, scrollPaddingStart, scrollPaddingEnd`
`scrollPaddingX`	`baseSpacing`	`scrollPaddingStart, scrollPaddingEnd`
`scrollPaddingY`	`baseSpacing`	`scrollPaddingTop, scrollPaddingBottom`
`scrollMargin`	`baseSpacing`	`scrollMarginTop, scrollMarginBottom, scrollMarginStart, scrollMarginEnd`
`scrollMarginX`	`baseSpacing`	`scrollMarginStart, scrollMarginEnd`
`scrollMarginY`	`baseSpacing`	`scrollMarginTop, scrollMarginBottom`
`borderWidth`	`'0' \| '1' \| '2' \| '4'`	`borderTopWidth, borderBottomWidth, borderStartWidth, borderEndWidth`
`borderXWidth`	`'0' \| '1' \| '2' \| '4'`	`borderStartWidth, borderEndWidth`
`borderYWidth`	`'0' \| '1' \| '2' \| '4'`	`borderTopWidth, borderBottomWidth`
`borderRadius`	`'none' \| 'sm' \| 'default' \| 'lg' \| 'xl' \| 'full' \| 'pill'`	`borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius`
`borderTopRadius`	`'none' \| 'sm' \| 'default' \| 'lg' \| 'xl' \| 'full' \| 'pill'`	`borderTopStartRadius, borderTopEndRadius`
`borderBottomRadius`	`'none' \| 'sm' \| 'default' \| 'lg' \| 'xl' \| 'full' \| 'pill'`	`borderBottomStartRadius, borderBottomEndRadius`
`borderStartRadius`	`'none' \| 'sm' \| 'default' \| 'lg' \| 'xl' \| 'full' \| 'pill'`	`borderTopStartRadius, borderBottomStartRadius`
`borderEndRadius`	`'none' \| 'sm' \| 'default' \| 'lg' \| 'xl' \| 'full' \| 'pill'`	`borderTopEndRadius, borderBottomEndRadius`
`translate`	`'full' \| baseSpacing \| negativeSpacing \| LengthPercentage`	`translateX, translateY`
`scale`	`number \| '${number}%'`	`scaleX, scaleY`
Accepts a number or percentage string.
`inset`	`'auto' \| 'full' \| baseSpacing \| negativeSpacing \| LengthPercentage`	`top, bottom, insetStart, insetEnd`
`insetX`	`'auto' \| 'full' \| baseSpacing \| negativeSpacing \| LengthPercentage`	`insetStart, insetEnd`
`insetY`	`'auto' \| 'full' \| baseSpacing \| negativeSpacing \| LengthPercentage`	`top, bottom`
`placeItems`	`'start' \| 'end' \| 'center' \| 'stretch'`	`alignItems, justifyItems`
`placeContent`	`'normal' \| 'center' \| 'start' \| 'end' \| 'space-between' \| 'space-around' \| 'space-evenly' \| 'baseline' \| 'stretch'`	`alignContent, justifyContent`
`placeSelf`	`'auto' \| 'start' \| 'end' \| 'center' \| 'stretch' \| 'baseline'`	`alignSelf, justifySelf`
`gap`	`text-to-control \| text-to-visual \| edge-to-text \| pill \| baseSpacing`	`rowGap, columnGap`
`size`	`'auto' \| 'full' \| 'min' \| 'max' \| 'fit' \| 'screen' \| number \| LengthPercentage`	`width, height`
`minSize`	`'auto' \| 'full' \| 'min' \| 'max' \| 'fit' \| 'screen' \| number \| LengthPercentage`	`minWidth, minHeight`
`maxSize`	`'auto' \| 'full' \| 'min' \| 'max' \| 'fit' \| 'screen' \| 'none' \| number \| LengthPercentage`	`maxWidth, maxHeight`
`overflow`	`'auto' \| 'hidden' \| 'clip' \| 'visible' \| 'scroll'`	`overflowX, overflowY`
`overscrollBehavior`	`'auto' \| 'contain' \| 'none'`	`overscrollBehaviorX, overscrollBehaviorY`
`gridArea`	`string`	`gridColumnStart, gridColumnEnd, gridRowStart, gridRowEnd`
`transition`	`'default' \| 'colors' \| 'opacity' \| 'shadow' \| 'transform' \| 'all' \| 'none'`	`transition, transitionDuration, transitionTimingFunction`
`animation`	`string`	`animation, animationDuration, animationTimingFunction`
This shorthand explicitly defines duration as 150 and the timing function as "default".
`truncate`	`'true'`	`overflowX, overflowY, textOverflow, whiteSpace`
Applying this shorthand will enable text truncation.
`font`	`fontSize`	`fontFamily, fontSize, fontWeight, lineHeight, color`
The "fontSize" provided defines the values this shorthand sets on the mapped values.

Conditions

Property	Values
`forcedColors`	`'@media (forced-colors: active)'`
`touch`	`'@media not ((hover: hover) and (pointer: fine))'`
`sm`	`'@media (min-width: ${pxToRem(640)})'`
`md`	`'@media (min-width: ${pxToRem(768)})'`
`lg`	`'@media (min-width: ${pxToRem(1024)})'`
`xl`	`'@media (min-width: ${pxToRem(1280)})'`
`2xl`	`'@media (min-width: ${pxToRem(1536)})'`

Style Macro Reference

Colors

Background colors

Text colors

Semantic colors

Global colors