Style props

Every styled Tamagui component accepts a universal, web-aligned style API with cross-platform additions that render cleanly on both web and native.

The full types are exported as ViewStyle and TextStyle. For the base set, see the React Native docs (v3 targets React Native 0.82):

• React Native View style props
• React Native Text style props

Every value may also be a token, a theme key, or a conditional value.

Cross-platform additions

These render on web and native.

Prop

boxShadow

Value

string, object, or array

Notes

Accepts theme colors inside the string, such as "0 0 10px shadow-color".

Prop

filter

Value

CSS filter string

Notes

brightness and opacity work everywhere, while blur, contrast, and the rest need Android 12+.

Prop

backgroundImage

Value

linear-gradient() or radial-gradient()

Notes

Accepts tokens and theme colors. url() is web only. Use ImageBackground on native.

Prop

border

Value

"1px solid border-color"

Notes

Expands to width, style, and color per side on native. Native supports one border for all sides.

Prop

outline

Value

"2px solid outline-color"

Notes

Expands to outlineWidth, outlineStyle, and outlineColor on native.

Prop

outlineColor, outlineWidth, outlineOffset, outlineStyle

Value

color, space, space, solid, dotted, or dashed

Notes

Prop

textShadow

Value

"2px 2px 4px shadow-color"

Notes

Multiple shadows are web only.

Prop

cursor

Value

CSS cursor

Notes

Web, and iOS 17+ for trackpad, stylus, and gaze.

Prop

position

Value

absolute, relative, fixed, static, sticky

Notes

fixed becomes absolute on native.

Prop

display

Value

flex, none, contents, and the CSS values

Notes

Prop

mixBlendMode

Value

normal, multiply, screen, overlay, and the rest

Notes

Prop

isolation

Value

auto or isolate

Notes

Prop

boxSizing

Value

border-box or content-box

Notes

Each of these is a top-level prop that folds into the transform array:

Prop

x, y

Value

number

Prop

scale, scaleX, scaleY

Value

number

Prop

rotate, rotateX, rotateY, rotateZ

Value

string such as "45deg"

Prop

skewX, skewY

Value

string

Prop

perspective

Value

number

Prop

matrix

Value

number array

Web-only props

These are typed and accepted everywhere, and render only on web:

Group

Background

Props

background, backgroundAttachment, backgroundBlendMode, backgroundClip, backgroundOrigin, backgroundPosition, backgroundRepeat, backgroundSize

Group

Borders

Props

borderTop, borderRight, borderBottom, borderLeft, borderImage

Group

Masks

Props

mask, maskImage, maskBorder, maskBorderMode, maskBorderOutset, maskBorderRepeat, maskBorderSlice, maskBorderSource, maskBorderWidth, maskClip, maskComposite, maskMode, maskOrigin, maskPosition, maskRepeat, maskSize, maskType

Group

Layout

Props

float, overflowBlock, overflowInline, contain, transformStyle

Group

Effects

Props

backdropFilter, clipPath

Group

Text and input

Props

caretColor, textEmphasis, touchAction

Text props

Text components accept the view props above plus the React Native text styles: color, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textDecorationColor, textDecorationLine, textDecorationStyle, textShadowColor, textShadowOffset, textShadowRadius, and textTransform.

v3 separates raw numbers from exact pixel strings:

<html.span fontSize={17}>Platform line height</html.span>
<html.span fontSize="17px">Exact px size</html.span>
Copy

fontSize={17} is a platform value and keeps the platform-default line height. fontSize="17px" passes through as CSS on web and parses to a number on native. The v5 config pins its font size and lineHeight scales to px strings so v2 output is preserved.

Variables inside shorthand strings

boxShadow, backgroundImage, filter, border, outline, and textShadow resolve tokens and theme keys inside the string on both platforms. borderTop and friends and background do the same on web only.

<html.div boxShadow="0 0 10px shadow-color" />
<html.div boxShadow="0 0 5px shadow-color, 0 0 15px color" />
<html.div backgroundImage="linear-gradient(to bottom, background, color)" />
<html.div filter="blur(7px)" />

// web: boxShadow: "0 0 10px var(--t-shadow-shadow-color)"
// native: boxShadow: "0 0 10px rgba(0,0,0,0.2)"
Copy

<html.div border="1px solid border-color" />
<html.div border="2px dashed red" />
<html.div border="none" />
Copy

On web the shorthand passes straight through. On native it expands to borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderStyle, and the four border*Color props. Native supports a single border for all sides, so use the per-side props for anything else.

<html.div outline="2px solid outline-color" />
<html.div outline="1px dashed red" />
<html.div outline="none" />
Copy

On native this expands to outlineWidth, outlineStyle, and outlineColor.

<html.div backgroundImage="linear-gradient(to bottom, background, color)" />
<html.div backgroundImage="radial-gradient(circle, white, black)" />
Copy

linear-gradient() and radial-gradient() work on both platforms. url() is web only, so use ImageBackground for images on native.

<html.span textShadow="2px 2px 4px shadow-color">Shadowed</html.span>

// multiple shadows, web only
<html.span textShadow="1px 1px 2px shadow-color, 0 0 8px color">Glowing</html.span>
Copy

The individual textShadowColor, textShadowOffset, and textShadowRadius props also work. Native renders one text shadow.

rem units

rem works on both platforms. Browsers handle it natively, and native converts it to pixels using PixelRatio.getFontScale(), so it follows the user’s font size preference:

<html.div padding="1rem" />
<html.span fontSize="1.5rem" />
Copy

The base font size defaults to 16 and is set with settings.remBaseFontSize. On native, 1rem with a base of 16 equals 16 * PixelRatio.getFontScale() pixels.