Design system

A Tamagui config is a small design system. Style props resolve their values against it, so padding="4" and color="color-11" mean the same thing on every screen and every platform.

Most apps start from the @tamagui/config/v6 preset and customize from there. It ships Tailwind’s spacing scale, the full Tailwind palette, adaptive light and dark themes, and Tailwind-aligned shorthands:

tamagui.config.ts
Copy
import { defaultConfig } from '@tamagui/config/v6'
import { createTamagui } from 'tamagui'

export const config = createTamagui(defaultConfig)

declare module 'tamagui' {
  interface TamaguiCustomConfig extends typeof config {}
}

See Config v6 for what the preset contains and Configuration for building one from scratch.

Tokens

Tokens are named static values. They become CSS variables on web and plain values on native, and every style prop accepts a token from the matching category:

Category

space

Style props it feeds

padding, margin, gap, inset

v6 example

padding="4" is 16px

Category

size

Style props it feeds

width, height, min and max sizes

v6 example

width="64"

Category

radius

Style props it feeds

borderRadius and its corners

v6 example

borderRadius="lg"

Category

color

Style props it feeds

any color prop

v6 example

backgroundColor="blue-500"

Category

zIndex

Style props it feeds

zIndex

v6 example

zIndex="1"

A bare value such as "4" looks up the token for that prop’s category. Numbers are pixels, and "4px" or px(4) forces a pixel value when a token has the same name. See Tokens.

Themes

Themes are values that change per subtree, most often colors. A theme is an object of keys, and sub-themes named parent_child fall back to their parent:

themes: {
  light: { background: '#fff', color: '#000' },
  dark: { background: '#000', color: '#fff' },
  dark_blue: { background: '#0b1a33', color: '#e5efff' },
}
Copy

Style props read theme keys by name, so backgroundColor="background" follows whichever theme is active. The v6 preset adds an adaptive ramp, color-1 through color-11, that steps from the page background toward the strongest foreground in both schemes:

<html.div backgroundColor="color-2" borderColor="color-5">
  <html.p color="color-11">Adapts to light and dark</html.p>
</html.div>
Copy

Switch themes with <Theme name="dark"> or a theme prop. See Themes for sub-themes, component themes, and inverse themes, and Creating themes to generate full suites.

Fonts

Fonts are tokens with structure. Each family carries its own size, line height, weight, and letter spacing scales, so fontSize="lg" and lineHeight="lg" pull from the same family. Text components pick a family with fontFamily, and SizableText, Paragraph, and the headings take a size prop that sets all four at once:

<html.p fontFamily="body" fontSize="lg" lineHeight="lg">
  Body copy
</html.p>

<Paragraph size="lg">Body copy</Paragraph>
Copy

See Fonts for createFont, native font files, and per-language fonts.

Media queries

Named media queries in the config become modifiers on every style prop, keys on useMedia, and container query names:

<html.div flexDirection="column md:row" padding="4 lg:8" />
Copy

The v6 preset defines xs, sm, md, lg, xl, and xxl as min-width queries with matching max-sm style variants, plus hoverable and touchable. See useMedia.

Where the pieces meet

<html.button
  paddingHorizontal="4"
  paddingVertical="2"
  borderRadius="md"
  backgroundColor="background hover:background-hover press:background-press"
  color="color"
  fontSize="sm md:base"
>
  Save
</html.button>
Copy

Spacing and radius come from tokens, colors from the active theme, font size from the body font, and md: from the media config. The compiler turns all of it into atomic CSS on web, and the runtime resolves the same values on native.