GitHub

Tamagui v3

Tailwind that runs on native

Write Tailwind utility classes. The Tamagui compiler renders them on iOS and web, pixel-matched to Tailwind v4, in the same engine that gives you themes, tokens, and components.

<View className="flex-row items-center gap-3 p-4 rounded-xl bg-indigo-500" />
Read the docsHow it works

Verified pixel by pixel

Every utility renders the same className three ways, then the harness crops to the element and diffs it against real Tailwind v4.

Tailwind v4

=

Tamagui web

=

Tamagui iOS

className="w-20 h-20 bg-amber-100 border-4 border-rose-500 rounded-xl"

0.0% diff

94%

web vs Tailwind

97%

iOS vs Tailwind

122

cases measured

flex flex-row gap-2 p-3 bg-slate-100

0.0% diff

Tailwind v4

=

Tamagui web

=

Tamagui iOS

flex items-center justify-center

0.0% diff

Tailwind v4

=

Tamagui web

=

Tamagui iOS

flex flex-col gap-2 p-2 bg-slate-200

0.0% diff

Tailwind v4

=

Tamagui web

=

Tamagui iOS

w-20 h-20 bg-indigo-500 rounded-full

0.0% diff

Tailwind v4

=

Tamagui web

=

Tamagui iOS

w-24 h-24 bg-indigo-500

0.0% diff

Tailwind v4

=

Tamagui web

=

Tamagui iOS

Method: each className is cropped to its element and diffed per pixel at 1% tolerance, on a real iOS render and a browser. The rest is margin-inner, grow / shrink, inset-x, single-side borders, text metrics: a few conversions still in progress, and real platform differences like CSS margin-collapse, which flexbox does not have. No fallbacks.

Read the docs

Classes, or props

Spacing snaps to the 4px scale, colors to the Tailwind v4 palette, radii to the v4 scale. The same utilities are also props, so you can migrate a line at a time.

Layout

flex flex-row items-center justify-betweenflex flex-col gap-3 p-4absolute inset-0

Spacing & sizing

p-4 px-6 py-2w-24 h-24 max-w-96w-1/2 w-full

Color & borders

bg-indigo-500 bg-emerald-400border-2 border-rose-500rounded-lg rounded-full

The same class, as a prop. One system, not two.

className="p-4 rounded-xl"≡p="4" rounded="xl"
className="bg-indigo-500"≡bg="indigo-500"
className="flex-row gap-3"≡flexDirection="row" gap="3"

Coverage, measured

Native coverage counts how many of Tailwind's 23,286 classes reach React Native as styles it renders. It does not measure whether they render the same across platforms. That is what the 94 and 97 above are for.

Tamagui

54.4%

cross-platform

NativeWind

52.5%

cross-platform

Uniwind

50.8%

cross-platform

Utility

Tamagui

Tailwind

NativeWind

Uniwind

display

◐

web

◐

◐

position

◐

web

◐

◐

flex-direction

●

web

●

●

gap

●

web

●

●

padding / margin

●

web

●

●

width / height

●

web

◐

●

background-color

●

web

●

●

border-radius

●

web

●

●

logical props

◐

web

◐

◐

box-shadow

●

web

●

●

Variants & states

Tamagui

Tailwind

NativeWind

Uniwind

hover

●

web

●

–

focus / focus-visible

●

web

◐

–

focus-within

●

web

web

–

breakpoints (sm, md…)

●

web

●

●

dark mode

●

web

●

●

group hover / press

–

web

●

–

peer variants

–

web

●

–

● full · ◐ partial · web web-only · – none

NativeWind covers more raw utilities. Tamagui covers fewer, renders them identically across platforms, and does it inside the same compiler as your themes, tokens, and components.