tamagui

Design tokens in Tamagui define colors, spacing, and typography once, then apply consistently across web and native. Use styled() with token names and configure Themes in your tamagui.config.ts to create theme variants. Run npx tamagui generate-prompt to extract your project's tokens and theme names for reference.

Yes. Tamagui compiles the same styled() components and token-based styles to web (CSS) and native (React Native) simultaneously. XStack, YStack, and other primitives handle layout differences automatically, reducing platform-specific code.

Use Tamagui's responsive style syntax with tokens and media queries in styled() components. Define breakpoints in your theme configuration, then apply conditional styles that adapt layouts for mobile, tablet, and desktop without platform-specific branching.

Build components using styled() with token-driven variants and theme-aware props. Define Button, Dialog, Sheet, and custom primitives once with tokens, then compose them across your app. Variants let you create size, color, and state permutations without duplicating style logic.

Tamagui's compiler extracts and flattens styled() definitions at build time, removing runtime overhead and generating optimized CSS for web and native bytecode. This reduces bundle size and improves performance without changing your component API.

Yes. Each Tamagui project requires tamagui.config.ts to define tokens, themes, and compiler settings. Run npx tamagui generate-prompt in your project to create tamagui-prompt.md with your specific tokens and theme names for reference.