Introduction

Two ways to write styles

Tamagui ships two styling frontends. Both compile to the same atomic CSS on web and the same native styles on iOS and Android, and both accept the same tokens, themes, and media queries.

Style props on View and Text are the default. They are typed and compile to atomic CSS on web or native styles on iOS and Android:

import { Text, View } from "@tamagui/tailwind";
export const Card = () => <View className="p-4 rounded-lg bg-background">
    <Text className="text-6">Hello</Text>
    <Text className="color-color-11 hover:color-[color-12]">World</Text>
  </View>;
Copy

Tailwind classes on className are the other option, for teams who already think in utilities:

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

export const Card = () => (
  <View className="p-4 rounded-lg bg-background">
    <Text className="text-2xl">Hello</Text>
    <Text className="text-color-11 hover:text-color-12">World</Text>
  </View>
)
Copy

The choice is per import path, so one app can use both. Read Components for the style prop path and Tailwind for the utility path.

Why a compiler

Cross-platform development often involves trade-offs between native feel, code reuse, and performance. React Native shares logic across platforms, but on web, styling in JavaScript can mean heavy runtime overhead and larger bundles.

Tamagui resolves this with @tamagui/static, an optimizing compiler that:

Here is what that looks like in code:

import { View, Text, styled } from '@tamagui/core'
import { Heading } from './Heading'

const App = (props) => (
  <View px="10px gtSm:30px" width={550}>
    <Heading size={props.big ? 'large' : 'small'}>Lorem ipsum.</Heading>
  </View>
)

const Heading = styled(Text, {
  render: 'h1',
  color: 'green',
  backgroundColor: 'background',

  variants: {
    size: {
      large: {
        fontSize: 22,
      },
      small: {
        fontSize: 16,
      },
    },
  },
})

export const App = props => <div className={_cn}>
    <h1 className={_cn2 + (_cn3 + (props.big ? _cn4 : _cn5))}>
      Lorem ipsum.
    </h1>
  </div>
  
const _cn5 = " _fos-16px"
const _cn4 = " _fos-22px"
const _cn3 = " _bg-180kg62 _col-b5vn3b _mt-0px _mr-0px _mb-0px _ml-0px _ww-break-word _bxs-border-box _ff-System _dsp-inline  "
const _cn2 = "  font_System"
const _cn = "  _fd-column _miw-0px _mih-0px _pos-relative _bxs-border-box _fb-auto _dsp-flex _fs-0 _ai-stretch  _w-550px _pr-1aj14ca _pl-1aj14ca  _pr-_gtSm_lrpixp _pl-_gtSm_lrpixp"

The Text became a p and the YStack became a div. On native the same pass produces Text and View. Flattening is where most of the speed comes from. Across real apps around a third to a half of components flatten, and the result on web is close to hand-written CSS. On native the output is within a few percent of hand-optimized React Native, with the whole feature set intact.

Everything still works at runtime. The compiler is an optimization you can add later, and a component it cannot optimize simply renders the normal way. See Benchmarks for numbers and Compiler installation to turn it on.

Where to go next

• Installation sets up a project or hands the job to a coding agent.
• Components covers html.*, View, Text, and how they render on each platform.
• Styling explains style props, conditional values, and states.
• Design system introduces tokens, themes, and fonts.
• Tailwind covers the utility class frontend.

Highlights

Community

Join us on:

• Discord
• X
• GitHub

Credits

A big thanks to:

• Stitches for the variants pattern.
• JSXStyle for providing the original version of the compiler.
• Modulz for Radix, which inspired many of our component APIs, and for the initial structure of this website.
• Framer Motion for the AnimatePresence implementation.