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?
- No — Windcraft does not auto-translate or mirror a web screen into RN components. The cross-platform value is shared values: your theme.ts is generated from the same source as your web tailwind.config.ts and tokens.css, so colors, spacing, and radii stay in sync while you still write the React Native components yourself.