Stack & Text

Stack and Text are functionally equivalent to React Native View and Text, they just accept the superset of props that Tamagui supports.

See the Props docs for the full list of properties.

You can use them directly:

import { Stack, Text } from 'tamagui' // or '@tamagui/core'

export default () => (
  <Stack margin={10}>
    <Text color="$color">Hello</Text>
  </Stack>
)

Or use them with styled to create your own base level design system:

import { Stack, styled } from 'tamagui' // or '@tamagui/core'

export const Circle = styled(Stack, {
  borderRadius: 100_000_000,

  variants: {
    pin: {
      top: {
        position: 'absolute',
        top: 0,
      },
    },

    centered: {
      true: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },

    size: {
      '...size': (size, { tokens }) => {
        return {
          width: tokens.size[size] ?? size,
          height: tokens.size[size] ?? size,
        }
      },
    },
  } as const,
})

Inline styles and styled() both are optimized by the compiler, so you can author styles using them both depending on the use case.

When set a defaultFont is defined int your Tamagusi.config.ts` and its set to be one of key values found inthe correct part of the design system, you basically d