Shorthands

Shorthands give frequently used style props shorter names, such as px for paddingHorizontal.

Define them on createTamagui under shorthands. Each key maps to one style property:

tamagui.config.ts
Copy
// as const keeps the keys literal so types flow through
const shorthands = {
  ac: 'alignContent',
  ai: 'alignItems',
  als: 'alignSelf',
  bg: 'backgroundColor',
  br: 'borderRadius',
  f: 'flex',
  m: 'margin',
  px: 'paddingHorizontal',
  w: 'width',
  // ...
} as const

export const config = createTamagui({
  shorthands,
  // ...
})

Shorthands work everywhere a style prop works: inline props, styled, variants, media and pseudo clauses, and the compiler flattens them the same way it flattens the long form.

<html.div br="lg" bg="background" px="4" />
Copy

@tamagui/config/v6 ships with Tailwind-aligned names such as w, h, p, m, px, rounded, items, and justify. Spread defaultConfig.shorthands to extend them.

Only allowing shorthands

Set settings.onlyAllowShorthands to remove the long-form prop types for every property that has a shorthand. Autocomplete then shows one spelling per property:

tamagui.config.ts
Copy
export const config = createTamagui({
  shorthands,
  settings: {
    onlyAllowShorthands: true,
  },
})

This is type-level only. The runtime still accepts the long form.