The how and why of Tamagui

Tamagui is a light layer above React Native / React Native Web, augmenting rather than replacing them. Tamagui's goal is simple: share a lot more code between web and native apps, without sacrificing look, feel and especially, performance. It's a big step forward for:
  • Responsive styling — fully cross platform, easy to use, with amazing performance.
  • Theming — works cross platform, fast, avoiding all runtime on web.
  • Inline styles — that are typed, and extracted into atomic CSS at build-time.
Today, you can't share code between Native and Web without resorting to writing media queries, themes and styles in JS. This slows things down a lot and generally feels clunky. Tamagui works backwards from ideal syntax - both inline styles and hooks - and then on the web generates CSS media queries  and CSS variables  when possible. On native it extracts everything to StyleSheet.create. This makes everything fast. The compiler goes further and flattens what would have been a View or Text into a div or span when possible, improving performance. React Native ❤️
Work with your favorite libraries: react-native and react-native-web. Tamagui improves typical performance with an optimizing compiler - especially with media queries, themes, and dynamic styles. Themed, Responsive
Hooks useTheme and useMedia and inline theme and media styling work just how you'd expect them to. But they compile to clean CSS media queries and CSS variables. Faster Runtime
Not just 0 prop interpolation, but 0 prop interpolation on inline styles and dynamic styles. Even with complex logical styling you get less runtime, light CSS output, and flatter component trees. Plus CSS media queries and CSS variables run much faster than JS ones. Less Runtime
Less JS to parse, especially when doing logic in your render function. Ternaries, object spreads, and more get extracted. Strictly style components (with no un-parseable props) are flattened to div or span, saving tree depth and hook calls. Server-Side Rendering
Tamagui supports cross-browser server-side rendering (see how we do it with Next.js ), even for responsive styles and variants. Key Features
Variants as a first-class citizen, so you can design composable component APIs. Define a single variant, multiple variants, and even Spread Variants which allow you to return dynamic styles, even at compile-time. Tokens
Define your own tokens and seamlessly apply them as CSS values. CSS Properties are automatically mapped to token scales. Tokens can even be used in shorthand CSS properties. Themes
Tamagui provides a simple theming experience out of the box. Create as many themes as you need, and apply them wherever you want. Each theme generates a CSS class name which overrides the default tokens. Shorthands
Shorthands allow you to map shorthand properties to their longer cousins. This lets you create Tailwinds-like quick properties to style. These work with TypeScript as well, and are designed so you can bring them with you across different tamagui component kits. Responsive
Tamagui lets you configure media queries and apply variants responsively using $ props. Developer Experience
Tamagui provides a fully-typed API so all your TypeScript style properties, values, media queries and shorthands will be auto-completed for you. It provides a // debug pragma and debug prop that both allow easy introspection into whats happening at compile and runtime. In dev mode it puts a data- attribute that links every DOM node back to your original source.
We're excited to see the community adopt Tamagui, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
A big thanks to: