Style Props

Style props is a method to change the style of a component just by passing props to the component. It also provides many useful shorthands, improving development efficiency.

Editable example

<Box w="full" p="md" bg="warning" color="white">
  This is Box
</Box>

Prop	CSS Property	Theme Tokens
`accentColor`, `accent`	accent-color	colors
`alignContent`	align-content	none
`alignItems`	align-items	none
`alignSelf`	align-self	none
`alignTracks`	align-tracks	none
`alignmentBaseline`	alignment-baseline	none
`all`	all	none
`animation`	animation	animations
`animationComposition`	animation-composition	none
`animationDelay`	animation-delay	none
`animationDirection`	animation-direction	none
`animationDuration`	animation-duration	transitions.duration
`animationFillMode`	animation-fill-mode	none
`animationIterationCount`	animation-iteration-count	none
`animationName`	animation-name	none
`animationPlayState`	animation-play-state	none
`animationRange`	animation-range	none
`animationRangeEnd`	animation-range-end	none
`animationRangeStart`	animation-range-start	none
`animationTimeline`	animation-timeline	none
`animationTimingFunction`	animation-timing-function	transitions.easing
`appearance`	appearance	none
`aspectRatio`	aspect-ratio	none
`azimuth`	azimuth	none
`backdropBlur`	`-ui-backdrop-blur`	blurs
`backdropBrightness`	`-ui-backdrop-brightness`	none
`backdropContrast`	`-ui-backdrop-contrast`	none
`backdropDropShadow`	`-ui-backdrop-drop-shadow`	shadows
`backdropFilter`	backdrop-filter	none
`backdropGrayscale`	`-ui-backdrop-grayscale`	none
`backdropHueRotate`	`-ui-backdrop-hue-rotate`	none
`backdropInvert`	`-ui-backdrop-invert`	none
`backdropSaturate`	`-ui-backdrop-saturate`	none
`backdropSepia`	`-ui-backdrop-sepia`	none
`backfaceVisibility`	backface-visibility	sizes
`background`, `bg`	background	colors
`backgroundAttachment`, `bgAttachment`	background-attachment	none
`backgroundBlendMode`, `bgBlendMode`	background-blend-mode	none
`backgroundClip`, `bgClip`	background-clip	none
`backgroundColor`, `bgColor`	background-color	colors
`backgroundImage`, `bgImage`, `bgImg`, `bgGradient`	background-image	gradients
`backgroundOrigin`, `bgOrigin`	background-origin	none
`backgroundPosition`, `bgPosition`	background-position	none
`backgroundPositionX`, `bgPositionX`, `bgPosX`	background-position-x	none
`backgroundPositionY`, `bgPositionY`, `bgPosY`	background-position-y	none
`backgroundRepeat`, `bgRepeat`	background-repeat	none
`backgroundSize`, `bgSize`	background-size	none
`baselineShift`	baseline-shift	none
`blockSize`	block-size	sizes
`blur`	`-ui-blur`	blurs
`border`	border	borders
`borderBlock`	border-block	borders
`borderBlockColor`	border-block-color	colors
`borderBlockEnd`	border-block-end	borders
`borderBlockEndColor`	border-block-end-color	colors
`borderBlockEndStyle`	border-block-end-style	none
`borderBlockEndWidth`	border-block-end-width	none
`borderBlockStart`	border-block-start	borders
`borderBlockStartColor`	border-block-start-color	colors
`borderBlockStartStyle`	border-block-start-style	none
`borderBlockStartWidth`	border-block-start-width	none
`borderBlockStyle`	border-block-style	none
`borderBlockWidth`	border-block-width	none
`borderBottom`	border-bottom	borders
`borderBottomColor`	border-bottom-color	colors
`borderBottomLeftRadius`, `roundedBottomLeft`	border-bottom-left-radius	radii
`borderBottomRadius`, `roundedBottom`	border-bottom-left-radius + border-bottom-right-radius	radii
`borderBottomRightRadius`, `roundedBottomRight`	border-bottom-right-radius	radii
`borderBottomStyle`	border-bottom-style	none
`borderBottomWidth`	border-bottom-width	none
`borderCollapse`	border-collapse	none
`borderColor`	border-color	colors
`borderEndEndRadius`, `borderBottomEndRadius`, `roundedBottomEnd`	border-end-end-radius	radii
`borderEndStartRadius`, `borderBottomStartRadius`, `roundedBottomStart`	border-end-start-radius	radii
`borderImage`	border-image	borders
`borderImageOutset`	border-image-outset	none
`borderImageRepeat`	border-image-repeat	none
`borderImageSlice`	border-image-slice	none
`borderImageSource`	border-image-source	none
`borderImageWidth`	border-image-width	none
`borderInline`	border-inline	borders
`borderInlineColor`	border-inline-color	colors
`borderInlineEnd`, `borderEnd`	border-inline-end	borders
`borderInlineEndColor`, `borderEndColor`	border-inline-end-color	colors
`borderInlineEndRadius`, `borderEndRadius`, `roundedEnd`	border-end-start-radius + border-end-end-radius	radii
`borderInlineEndStyle`, `borderEndStyle`	border-inline-end-style	none
`borderInlineEndWidth`, `borderEndWidth`	border-inline-end-width	none
`borderInlineStart`, `borderStart`	border-inline-start	borders
`borderInlineStartColor`, `borderStartColor`	border-inline-start-color	colors
`borderInlineStartRadius`, `borderStartRadius`, `roundedStart`	border-start-start-radius + border-start-end-radius	radii
`borderInlineStartStyle`, `borderStartStyle`	border-inline-start-style	none
`borderInlineStartWidth`, `borderStartWidth`	border-inline-start-width	none
`borderInlineStyle`	border-inline-style	none
`borderInlineWidth`	border-inline-width	none
`borderLeft`	border-left	borders
`borderLeftColor`	border-left-color	colors
`borderLeftRadius`, `roundedLeft`	border-top-left-radius + border-bottom-left-radius	radii
`borderLeftStyle`	border-left-style	none
`borderLeftWidth`	border-left-width	none
`borderRadius`, `rounded`	border-radius	radii
`borderRight`	border-right	borders
`borderRightColor`	border-right-color	colors
`borderRightRadius`, `roundedRight`	border-top-right-radius + border-bottom-right-radius	radii
`borderRightStyle`	border-right-style	none
`borderRightWidth`	border-right-width	none
`borderSpacing`	border-spacing	none
`borderStartEndRadius`, `borderTopEndRadius`, `roundedTopEnd`	border-start-end-radius	radii
`borderStartStartRadius`, `borderTopStartRadius`, `roundedTopStart`	border-start-start-radius	radii
`borderStyle`	border-style	none
`borderTop`	border-top	borders
`borderTopColor`	border-top-color	colors
`borderTopLeftRadius`, `roundedTopLeft`	border-top-left-radius	radii
`borderTopRadius`, `roundedTop`	border-top-left-radius + border-top-right-radius	radii
`borderTopRightRadius`, `roundedTopRight`	border-top-right-radius	radii
`borderTopStyle`	border-top-style	none
`borderTopWidth`	border-top-width	none
`borderWidth`	border-width	none
`borderX`	border-left + border-right	borders
`borderY`	border-top + border-bottom	borders
`bottom`	bottom	spaces
`boxAlign`	box-align	none
`boxDecorationBreak`	box-decoration-break	none
`boxDirection`	box-direction	none
`boxFlex`	box-flex	none
`boxFlexGroup`	box-flex-group	none
`boxLines`	box-lines	none
`boxOrdinalGroup`	box-ordinal-group	none
`boxOrient`	box-orient	none
`boxPack`	box-pack	none
`boxShadow`, `shadow`	box-shadow	shadows
`boxSize`	width + height	sizes
`boxSizing`	box-sizing	none
`breakAfter`	break-after	none
`breakBefore`	break-before	none
`breakInside`	break-inside	none
`brightness`	`-ui-brightness`	none
`captionSide`	caption-side	none
`caretColor`, `caret`	caret-color	colors
`clear`	clear	none
`clip`	clip	none
`clipPath`	clip-path	none
`clipRule`	clip-rule	none
`color`, `textColor`	color	colors
`colorInterpolation`	color-interpolation	none
`colorMode`	color-scheme	none
`columnCount`	column-count	none
`columnFill`	column-fill	none
`columnGap`, `gx`, `gapX`	column-gap	spaces
`columnRule`	column-rule	none
`columnRuleColor`	column-rule-color	colors
`columnRuleStyle`	column-rule-style	none
`columnRuleWidth`	column-rule-width	none
`columnSpan`	column-span	none
`columnWidth`	column-width	none
`columns`	columns	none
`contain`	contain	none
`containIntrinsicBlockSize`	contain-intrinsic-block-size	none
`containIntrinsicHeight`	contain-intrinsic-height	none
`containIntrinsicInlineSize`	contain-intrinsic-inline-size	none
`containIntrinsicSize`	contain-intrinsic-size	none
`containIntrinsicWidth`	contain-intrinsic-width	none
`container`	container	none
`containerName`	container-name	none
`containerType`	container-type	none
`content`	content	none
`contentVisibility`	content-visibility	none
`contrast`	`-ui-contrast`	none
`counterIncrement`	counter-increment	none
`counterReset`	counter-reset	none
`counterSet`	counter-set	none
`cursor`	cursor	none
`direction`	direction	none
`display`	display	none
`dominantBaseline`	dominant-baseline	none
`dropShadow`	`-ui-drop-shadow`	shadows
`emptyCells`	empty-cells	none
`fill`	fill	colors
`fillOpacity`	fill-opacity	none
`fillRule`	fill-rule	none
`filter`	filter	none
`flex`	flex	none
`flexBasis`	flex-basis	sizes
`flexDirection`, `flexDir`	flex-direction	none
`flexFlow`	flex-flow	none
`flexGrow`	flex-grow	none
`flexShrink`	flex-shrink	none
`flexWrap`	flex-wrap	none
`float`	float	none
`floodColor`	flood-color	colors
`floodOpacity`	flood-opacity	none
`font`	font	none
`fontFamily`	font-family	fonts
`fontFeatureSettings`	font-feature-settings	none
`fontKerning`	font-kerning	none
`fontLanguageOverride`	font-language-override	none
`fontOpticalSizing`	font-optical-sizing	none
`fontPalette`	font-palette	none
`fontSize`, `text`	font-size	fontSizes
`fontSizeAdjust`	font-size-adjust	none
`fontSmooth`	font-smooth	none
`fontStretch`	font-stretch	none
`fontStyle`	font-style	none
`fontSynthesis`	font-synthesis	none
`fontSynthesisPosition`	font-synthesis-position	none
`fontSynthesisSmallCaps`	font-synthesis-small-caps	none
`fontSynthesisStyle`	font-synthesis-style	none
`fontSynthesisWeight`	font-synthesis-weight	none
`fontVariant`	font-variant	none
`fontVariantAlternates`	font-variant-alternates	none
`fontVariantCaps`	font-variant-caps	none
`fontVariantEastAsian`	font-variant-east-asian	none
`fontVariantEmoji`	font-variant-emoji	none
`fontVariantLigatures`	font-variant-ligatures	none
`fontVariantNumeric`	font-variant-numeric	none
`fontVariantPosition`	font-variant-position	none
`fontVariationSettings`	font-variation-settings	none
`fontWeight`	font-weight	fontWeights
`forcedColorAdjust`	forced-color-adjust	none
`gap`, `g`	gap	spaces
`glyphOrientationVertical`	glyph-orientation-vertical	none
`grayscale`	`-ui-grayscale`	none
`grid`	grid	none
`gridArea`	grid-area	none
`gridAutoColumns`	grid-auto-columns	none
`gridAutoFlow`	grid-auto-flow	none
`gridAutoRows`	grid-auto-rows	none
`gridColumn`	grid-column	none
`gridColumnEnd`	grid-column-end	none
`gridColumnStart`	grid-column-start	none
`gridRow`	grid-row	none
`gridRowEnd`	grid-row-end	none
`gridRowStart`	grid-row-start	none
`gridTemplate`	grid-template	none
`gridTemplateAreas`	grid-template-areas	none
`gridTemplateColumns`	grid-template-columns	none
`gridTemplateRows`	grid-template-rows	none
`hangingPunctuation`	hanging-punctuation	none
`height`, `h`	height	sizes
`hueRotate`	`-ui-hue-rotate`	none
`hyphenateCharacter`	hyphenate-character	none
`hyphenateLimitChars`	hyphenate-limit-chars	none
`hyphens`	hyphens	none
`imageOrientation`	image-orientation	none
`imageRendering`	image-rendering	none
`imageResolution`	image-resolution	none
`initialLetter`	initial-letter	none
`inlineSize`	inline-size	sizes
`inset`	inset	spaces
`insetBlock`	inset-block	spaces
`insetBlockEnd`	inset-block-end	spaces
`insetBlockStart`	inset-block-start	spaces
`insetInline`	inset-inline	spaces
`insetInlineEnd`, `insetEnd`	inset-inline-end	spaces
`insetInlineStart`, `insetStart`	inset-inline-start	spaces
`insetX`	left + right	spaces
`insetY`	top + bottom	spaces
`invert`	`-ui-invert`	none
`isolation`	isolation	none
`justifyContent`	justify-content	none
`justifyItems`	justify-items	none
`justifySelf`	justify-self	none
`justifyTracks`	justify-tracks	none
`left`	left	spaces
`letterSpacing`, `tracking`	letter-spacing	letterSpacings
`lightingColor`	lighting-color	colors
`lineBreak`	line-break	none
`lineHeight`, `leading`	line-height	lineHeights
`lineHeightStep`	line-height-step	none
`listStyle`	list-style	none
`listStyleImage`, `listStyleImg`	list-style-image	none
`listStylePosition`, `listStylePos`	list-style-position	none
`listStyleType`	list-style-type	none
`margin`, `m`	margin	spaces
`marginBlock`	margin-block	spaces
`marginBlockEnd`	margin-block-end	spaces
`marginBlockStart`	margin-block-start	spaces
`marginBottom`, `mb`	margin-bottom	spaces
`marginInline`	margin-inline	spaces
`marginInlineEnd`, `me`, `marginEnd`	margin-inline-end	spaces
`marginInlineStart`, `ms`, `marginStart`	margin-inline-start	spaces
`marginLeft`, `ml`	margin-left	spaces
`marginRight`, `mr`	margin-right	spaces
`marginTop`, `mt`	margin-top	spaces
`marginTrim`	margin-trim	none
`marginX`, `mx`	margin-inline-start + margin-inline-end	spaces
`marginY`, `my`	margin-top + margin-bottom	spaces
`markerEnd`	marker-end	none
`markerMid`	marker-mid	none
`markerStart`	marker-start	none
`mask`	mask	none
`maskBorder`	mask-border	none
`maskBorderMode`	mask-border-mode	none
`maskBorderOutset`	mask-border-outset	none
`maskBorderRepeat`	mask-border-repeat	none
`maskBorderSlice`	mask-border-slice	none
`maskBorderSource`	mask-border-source	none
`maskBorderWidth`	mask-border-width	none
`maskClip`	mask-clip	none
`maskComposite`	mask-composite	none
`maskImage`	mask-image	none
`maskMode`	mask-mode	none
`maskOrigin`	mask-origin	none
`maskPosition`	mask-position	none
`maskRepeat`	mask-repeat	none
`maskSize`	mask-size	none
`maskType`	mask-type	none
`masonryAutoFlow`	masonry-auto-flow	none
`mathDepth`	math-depth	none
`mathShift`	math-shift	none
`mathStyle`	math-style	none
`maxBlockSize`	max-block-size	sizes
`maxBoxSize`	max-width + max-height	none
`maxHeight`, `maxH`	max-height	sizes
`maxInlineSize`	max-inline-size	sizes
`maxWidth`, `maxW`	max-width	sizes
`minBlockSize`	min-block-size	sizes
`minBoxSize`	min-width + min-height	sizes
`minHeight`, `minH`	min-height	sizes
`minInlineSize`	min-inline-size	sizes
`minWidth`, `minW`	min-width	sizes
`mixBlendMode`, `blendMode`	mix-blend-mode	none
`objectFit`	object-fit	none
`objectPosition`	object-position	none
`offset`	offset	none
`offsetAnchor`	offset-anchor	none
`offsetDistance`	offset-distance	none
`offsetPath`	offset-path	none
`offsetPosition`	offset-position	none
`offsetRotate`	offset-rotate	none
`opacity`	opacity	none
`order`	order	none
`orphans`	orphans	none
`outline`	outline	none
`outlineColor`	outline-color	colors
`outlineOffset`	outline-offset	none
`outlineStyle`	outline-style	none
`outlineWidth`	outline-width	none
`overflow`	overflow	none
`overflowAnchor`	overflow-anchor	none
`overflowBlock`	overflow-block	none
`overflowClipMargin`	overflow-clip-margin	none
`overflowInline`	overflow-inline	none
`overflowWrap`	overflow-wrap	none
`overflowX`	overflow-x	none
`overflowY`	overflow-y	none
`overlay`	overlay	none
`overscrollBehavior`, `overscroll`	overscroll-behavior	none
`overscrollBehaviorBlock`	overscroll-behavior-block	none
`overscrollBehaviorInline`	overscroll-behavior-inline	none
`overscrollBehaviorX`, `overscrollX`	overscroll-behavior-x	none
`overscrollBehaviorY`, `overscrollY`	overscroll-behavior-y	none
`padding`, `p`	padding	spaces
`paddingBlock`	padding-block	spaces
`paddingBlockEnd`	padding-block-end	spaces
`paddingBlockStart`	padding-block-start	spaces
`paddingBottom`, `pb`	padding-bottom	spaces
`paddingInline`	padding-inline	spaces
`paddingInlineEnd`, `pe`, `paddingEnd`	padding-inline-end	spaces
`paddingInlineStart`, `ps`, `paddingStart`	padding-inline-start	spaces
`paddingLeft`, `pl`	padding-left	spaces
`paddingRight`, `pr`	padding-right	spaces
`paddingTop`, `pt`	padding-top	spaces
`paddingX`, `px`	padding-inline-start + padding-inline-end	spaces
`paddingY`, `py`	padding-top + padding-bottom	spaces
`page`	page	none
`pageBreakAfter`	page-break-after	none
`pageBreakBefore`	page-break-before	none
`pageBreakInside`	page-break-inside	none
`paintOrder`	paint-order	none
`perspective`	perspective	none
`perspectiveOrigin`	perspective-origin	none
`placeContent`	place-content	none
`placeItems`	place-items	none
`placeSelf`	place-self	none
`pointerEvents`	pointer-events	none
`position`, `pos`	position	none
`printColorAdjust`	print-color-adjust	none
`quotes`	quotes	none
`resize`	resize	none
`right`	right	spaces
`rotate`	`-ui-rotate`	none
`rowGap`, `gy`, `gapY`	row-gap	spaces
`rubyAlign`	ruby-align	none
`rubyPosition`	ruby-position	none
`saturate`	`-ui-saturate`	none
`scale`	`-ui-scale-x` + `-ui-scale-y`	none
`scaleX`	`-ui-scale-x`	none
`scaleY`	`-ui-scale-y`	none
`scrollBehavior`	scroll-behavior	none
`scrollMargin`	scroll-margin	spaces
`scrollMarginBlock`	scroll-margin-block	none
`scrollMarginBlockEnd`	scroll-margin-block-end	none
`scrollMarginBlockStart`	scroll-margin-block-start	none
`scrollMarginBottom`	scroll-margin-bottom	spaces
`scrollMarginInline`	scroll-margin-inline	none
`scrollMarginInlineEnd`	scroll-margin-inline-end	none
`scrollMarginInlineStart`	scroll-margin-inline-start	none
`scrollMarginLeft`	scroll-margin-left	spaces
`scrollMarginRight`	scroll-margin-right	spaces
`scrollMarginTop`	scroll-margin-top	spaces
`scrollMarginX`	scroll-margin-left + scroll-margin-right	spaces
`scrollMarginY`	scroll-margin-top + scroll-margin-bottom	spaces
`scrollPadding`	scroll-padding	spaces
`scrollPaddingBlock`	scroll-padding-block	none
`scrollPaddingBlockEnd`	scroll-padding-block-end	none
`scrollPaddingBlockStart`	scroll-padding-block-start	none
`scrollPaddingBottom`	scroll-padding-bottom	spaces
`scrollPaddingInline`	scroll-padding-inline	none
`scrollPaddingInlineEnd`	scroll-padding-inline-end	none
`scrollPaddingInlineStart`	scroll-padding-inline-start	none
`scrollPaddingLeft`	scroll-padding-left	spaces
`scrollPaddingRight`	scroll-padding-right	spaces
`scrollPaddingTop`	scroll-padding-top	spaces
`scrollPaddingX`	scroll-padding-left + scroll-padding-right	spaces
`scrollPaddingY`	scroll-padding-top + scroll-padding-bottom	spaces
`scrollSnapAlign`	scroll-snap-align	none
`scrollSnapStop`	scroll-snap-stop	none
`scrollSnapType`	scroll-snap-type	none
`scrollTimeline`	scroll-timeline	none
`scrollTimelineAxis`	scroll-timeline-axis	none
`scrollTimelineName`	scroll-timeline-name	none
`scrollbarColor`	scrollbar-color	none
`scrollbarGutter`	scrollbar-gutter	none
`scrollbarWidth`	scrollbar-width	none
`sepia`	`-ui-sepia`	none
`shapeImageThreshold`	shape-image-threshold	none
`shapeMargin`	shape-margin	none
`shapeOutside`	shape-outside	none
`shapeRendering`	shape-rendering	none
`skewX`	`-ui-skew-x`	none
`skewY`	`-ui-skew-y`	none
`stopColor`	stop-color	none
`stopOpacity`	stop-opacity	none
`stroke`	stroke	colors
`strokeDasharray`	stroke-dasharray	none
`strokeDashoffset`	stroke-dashoffset	none
`strokeLinecap`	stroke-linecap	none
`strokeLinejoin`	stroke-linejoin	none
`strokeMiterlimit`	stroke-miterlimit	none
`strokeOpacity`	stroke-opacity	none
`strokeWidth`	stroke-width	none
`tabSize`	tab-size	none
`tableLayout`	table-layout	none
`textAlign`	text-align	none
`textAlignLast`	text-align-last	none
`textAnchor`	text-anchor	none
`textCombineUpright`	text-combine-upright	none
`textDecoration`, `textDecor`	text-decoration	none
`textDecorationColor`	text-decoration-color	colors
`textDecorationLine`	text-decoration-line	none
`textDecorationSkip`	text-decoration-skip	none
`textDecorationSkipInk`	text-decoration-skip-ink	none
`textDecorationStyle`	text-decoration-style	none
`textDecorationThickness`	text-decoration-thickness	none
`textEmphasis`	text-emphasis	none
`textEmphasisColor`	text-emphasis-color	colors
`textEmphasisPosition`	text-emphasis-position	none
`textEmphasisStyle`	text-emphasis-style	none
`textIndent`	text-indent	none
`textJustify`	text-justify	none
`textOrientation`	text-orientation	none
`textOverflow`	text-overflow	none
`textRendering`	text-rendering	none
`textShadow`	text-shadow	shadows
`textSizeAdjust`	text-size-adjust	none
`textTransform`	text-transform	none
`textUnderlineOffset`	text-underline-offset	none
`textUnderlinePosition`	text-underline-position	none
`textWrap`	text-wrap	none
`timelineScope`	timeline-scope	none
`top`	top	spaces
`touchAction`	touch-action	none
`transform`	transform	none
`transformBox`	transform-box	none
`transformOrigin`	transform-origin	none
`transformStyle`	transform-style	none
`transitionBehavior`	transition-behavior	none
`transitionDelay`	transition-delay	none
`transitionDuration`	transition-duration	transitions.duration
`transitionProperty`	transition-property	transitions.property
`transitionTimingFunction`	transition-timing-function	transitions.easing
`translate`	translate	none
`translateX`	`-ui-translate-x`	spaces
`translateY`	`-ui-translate-y`	spaces
`unicodeBidi`	unicode-bidi	none
`userSelect`	user-select	none
`vectorEffect`	vector-effect	none
`verticalAlign`	vertical-align	none
`viewTimeline`	view-timeline	none
`viewTimelineAxis`	view-timeline-axis	none
`viewTimelineInset`	view-timeline-inset	none
`viewTimelineName`	view-timeline-name	none
`viewTransitionName`	view-transition-name	none
`visibility`	visibility	none
`whiteSpace`	white-space	none
`whiteSpaceCollapse`	white-space-collapse	none
`widows`	widows	none
`width`, `w`	width	sizes
`willChange`	will-change	none
`wordBreak`	word-break	none
`wordSpacing`	word-spacing	none
`writingMode`	writing-mode	none
`zIndex`, `z`	z-index	zIndices
`zoom`	zoom	none

When using blur, brightness, backdropBlur, backdropBrightness, etc., you need to set filter and backdropFilter to auto.

When using translateX, scale, skewX, etc., you need to set auto or auto-3d to transform.

Pseudo Elements and Selectors

Prop	CSS Property	Theme Tokens
`_accept`	`&[data-accept]`	none
`_active`	`&:active, &[data-active]`	none
`_after`	`&::after`	none
`_autofill`	`&:-webkit-autofill`	none
`_before`	`&::before`	none
`_between`	`&[data-between]`	none
`_checked`	`&:checked, &[data-checked], &[aria-checked=true]`	none
`_dark`	`.ui-dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]`	none
`_disabled`	`&:disabled, &[disabled], &[aria-disabled=true], &[data-disabled]`	none
`_empty`	`&:empty`	none
`_end`	`&[data-end]`	none
`_even`	`&:nth-of-type(even)`	none
`_expanded`	`&[aria-expanded=true], &[data-expanded]`	none
`_filled`	`&[data-filled]`	none
`_first`	`&:first-of-type`	none
`_firstLetter`	`&::first-letter`	none
`_firstLine`	`&::first-line`	none
`_focus`	`&:focus, &[data-focus]`	none
`_focusVisible`	`&:focus-visible, &[data-focus-visible]`	none
`_focusWithin`	`&:focus-within, &[data-focus-within]`	none
`_fullScreen`	`&:fullscreen`	none
`_hidden`	`&[hidden], &[data-hidden]`	none
`_holiday`	`&[data-holiday]`	none
`_horizontal`	`&:horizontal, &[data-orientation=horizontal]`	none
`_hover`	`&:hover, &[data-hover]`	none
`_idle`	`&[data-idle]`	none
`_indeterminate`	`&:indeterminate, &[aria-checked=mixed], &[data-indeterminate]`	none
`_invalid`	`&[data-invalid], &[aria-invalid=true]`	none
`_last`	`&:last-of-type`	none
`_light`	`.ui-light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]`	none
`_loaded`	`&[data-loaded]`	none
`_loading`	`&[data-loading], &[aria-busy=true]`	none
`_marker`	`&::marker`	none
`_mediaDark`	`@media (prefers-color-scheme: dark)`	none
`_mediaReduceMotion`	`@media (prefers-reduced-motion: reduce)`	none
`_nativeActive`	`&:active`	none
`_nativeFocus`	`&:focus`	none
`_nativeFocusVisible`	`&:focus-visible`	none
`_nativeFocusWithin`	`&:focus-within`	none
`_nativeHover`	`&:hover`	none
`_nativeTarget`	`&:target`	none
`_notFirst`	`&:not(:first-of-type)`	none
`_notLast`	`&:not(:last-of-type)`	none
`_notTarget`	`&:not(:target)`	none
`_odd`	`&:nth-of-type(odd)`	none
`_outside`	`&:where([data-outside])`	none
`_placeholder`	`&::placeholder, &[data-placeholder]`	none
`_placeholderShown`	`&:placeholder-shown`	none
`_readOnly`	`&[readonly], &[aria-readonly=true], &[data-readonly]`	none
`_reject`	`&[data-reject]`	none
`_ripple`	`& .ui-ripple`	none
`_scrollbar`	`&::-webkit-scrollbar`	none
`_scrollbarButton`	`&::-webkit-scrollbar-button`	none
`_scrollbarCorner`	`&::-webkit-scrollbar-corner`	none
`_scrollbarThumb`	`&::-webkit-scrollbar-thumb`	none
`_scrollbarTrack`	`&::-webkit-scrollbar-track`	none
`_scrollbarTrackPiece`	`&::-webkit-scrollbar-track-piece`	none
`_selected`	`&[aria-selected=true], &[data-selected]`	none
`_selection`	`&::selection`	none
`_start`	`&[data-start]`	none
`_target`	`&:target, &[data-target]`	none
`_today`	`&[data-today]`	none
`_valid`	`&:valid, &[data-valid], &[data-state=valid]`	none
`_vertical`	`&:vertical, &[data-orientation=vertical]`	none
`_visited`	`&:visited`	none
`_weekend`	`&:where([data-weekend])`	none

Edit this page on GitHub

PreviousStyled System NextTheming