A powerful `styled` constructor, inline props, shorthands and more.

app.tsx

heading.tsx

tamagui.config.ts

Styles

Styles extracted, logic evaluated, and a flatter tree with atomic CSS styles per-file.

app.js

app.css

V8 partial evaluation of your rendered conditional expressions, spreads, imports, and more.

Logic

Reduced object and increased render performance, improved SSR with inlinable CSS per-page.

Inline media props & useMedia hook. Even with logic, it's evaluated, flattened, and turned into CSS.

Media

Custom defined media queries output to clean CSS that runs much faster (try resizing this site).

Theme and media query hooks, fully typed that work the same across native and web.

Hooks

If all hooks are used purely for styling, the compiler will remove the hook call entirely.

Forms

Panels

Organize

Content

Visual

Etc

Tokens

Sizes

$0

0px

$0.25

2px

$0.5

4px

$0.75

8px

$1

20px

$1.5

24px

$2

28px

$2.5

32px

$3

36px

$3.5

40px

$4

44px

$4.5

48px

$5

52px

$6

64px

$7

74px

$8

84px

$9

94px

$10

104px

$11

124px

$12

144px

$13

164px

$14

184px

$15

204px

$16

224px

$17

224px

$18

244px

$19

264px

$20

284px