Config v6

Config v6 is the default configuration for Tamagui v3. Its spacing, sizing, radius, and type scales align with Tailwind CSS, while its themes use adaptive 11-shade ramps and composable relative levels.

yarn
npm
bun
pnpm
Copy
yarn add @tamagui/config

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

export const config = createTamagui(defaultConfig)

Defaults

• space and size use Tailwind’s 4px scale: 1 is 4, 4 is 16, and 8 is 32. Half steps, px, negative space tokens, and the larger Tailwind keys are included.
• Radius tokens include Tailwind names from xs through 4xl and full.
• Font size and line height include Tailwind names from xs through 9xl. Their existing numeric font-config line heights remain absolute pixels.
• w and h are width and height shorthands.
• tokens.color contains the full Tailwind palette with names such as blue-500 and slate-200.
• Themes provide adaptive color-1 through color-11, semantic generics, relative level2 through level4, inverse, accent, brand, red, yellow, and green.
• Adaptive ramp numbers are steps relative to the active theme’s own scheme. They are not Tailwind’s absolute 50 through 950 shades. Only the spelling changed when these keys became hyphenated.
• Shadows are per-theme values named shadow-1 through shadow-7, as in v5. Dark themes use stronger shadows than light themes, and boxShadow="0 8px 24px shadow-4" reads shadow-4 from the active theme.
• Z-index has no configured token scale. Bare values resolve a matching token only when an application adds one. Otherwise, the literal unitless value is preserved.

The config does not choose a global component size. Each styled control owns its own size variant inline and defaults to its md row.

This font-config behavior is distinct from v3 style authoring. A numeric Tamagui lineHeight prop is a ratio on web and native. Font configuration uses a numeric string such as "1.5" for a ratio and "24px" for an explicit absolute length. No value changes meaning based on its magnitude.

Package entries

• @tamagui/config/v6 contains the complete static default config.
• @tamagui/config/v6-base exports the color-independent scales, fonts, media, settings, and createV6Config(colors).
• @tamagui/config/v6-builder re-exports the recipe authoring API from @tamagui/themes/builder.

The static v6 entry imports generated themes. It does not run theme generation in the browser.

Animations

No animation driver is bundled. Import exactly one driver from its neutral entry and add it to the config:

tamagui.config.ts
Copy
import { animationsCSS } from '@tamagui/config/animations-css'
import { defaultConfig } from '@tamagui/config/v6'
import { createTamagui } from 'tamagui'

export const config = createTamagui({
  ...defaultConfig,
  animations: animationsCSS,
})

The other entries are animations-rn, animations-reanimated, and animations-motion. See Choosing an Animation Driver for their trade-offs.

Tailwind frontend

Use the separate Tailwind component frontend when you want className authoring:

import { Text, View, styled } from '@tamagui/tailwind'

export function Notice() {
  return <View className="rounded-lg bg-blue-500 p-4" />
}
Copy

Regular components imported from tamagui continue to use Tamagui style props. The shared v6 color tokens make absolute utilities such as bg-blue-500 resolve to the same values on web and native.

Tailwind leading utilities preserve the same distinction on both platforms. Spacing-scale leading and px arbitraries stay absolute, while unitless arbitraries are ratios:

<Text className="leading-8" />       {/* 32px */}
<Text className="leading-[24px]" />  {/* 24px */}
<Text className="leading-[1.25]" />  {/* 1.25 times the font size */}
Copy

Read v6 Colors to customize the palette and Creating Themes to customize the tree and scales.