Framework
One design language shared across web and mobile.
Web uses Tailwind and CSS variables; React Native uses StyleSheet objects. Without a shared source, the two platforms drift apart fast. Windcraft generates a theme.ts from the same tokens that build your web config, so both stay in sync.
Why web and mobile drift apart
Web and React Native have no common styling primitive — Tailwind classes do not exist in RN, and StyleSheet does not exist on web. So teams maintain two design systems by hand and they diverge: the brand blue is #2563EB on web and a slightly-off literal in theme.ts, the spacing scale rounds differently. Two codebases, two slowly-separating looks.
How Windcraft works with React Native
Windcraft keeps one set of tokens and generates per-platform outputs from it: tailwind.config.ts and tokens.css for web, and a theme.ts object for your Expo app. Both derive from the same values, so a color or spacing change updates both on the next sync.
- Run npx windcraft init and set your rnTheme output path in .windcraft/config.json.
- Run npx windcraft sync to generate theme.ts alongside your web outputs.
- Import the generated theme in your screens and style from theme.color / theme.spacing.
- Run npx windcraft check on the mobile source to flag literals that bypass the theme.
Style a React Native screen from the generated theme
// generated by `npx windcraft sync`
import { theme } from './theme'
import { StyleSheet, View } from 'react-native'
const styles = StyleSheet.create({
card: {
backgroundColor: theme.color.background.secondary,
padding: theme.spacing[4],
borderRadius: theme.radius.lg,
},
})
export function Card() {
return <View style={styles.card} />
}FAQ
- Does Windcraft support Expo?
- Yes. The generated theme.ts is a plain TypeScript object with no native dependencies, so it works in Expo and bare React Native alike. Point the rnTheme output at your app and sync.
- How do web and mobile stay in sync?
- Both outputs derive from one set of tokens. Change a color or spacing value once and the next npx windcraft sync regenerates the Tailwind config, the CSS variables, and theme.ts together — no manual double-entry.
- Can Windcraft turn a web screen into React Native code?
- Yes — the get_platform_mirror MCP tool translates a web component into a React Native starting point, wired to your shared tokens so colors, spacing, and radii already match on both sides. Treat the output as a scaffold you refine, not a pixel-perfect 1:1 port — but it skips the from-scratch rewrite and keeps web and mobile reading from one source of truth (your theme.ts and tailwind.config.ts are generated from the same tokens).