Build apps with NativeWind
NativeWind brings Tailwind CSS utility classes to React Native, compiling className= props into native styles at build time. Goodspeed generates NativeWind as a standard part of every app, so the output is a working codebase from day one, not a scaffold you have to finish yourself.
WHAT GETS GENERATED
Built into every NativeWind build
Every app Goodspeed generates with NativeWind includes these production-ready patterns, wired together from the first build.
| Item | Description | Strength |
|---|---|---|
| nativewind-env.d.ts type shim | A one-line type shim enables className= on every React Native View, Text, and Image without requiring per-component type casts. | Setup |
| className on every UI primitive | Every UI primitive uses Tailwind utility classes rather than StyleSheet.create, keeping styles colocated with markup and readable by any web developer. | Interface |
| Dark mode via class variants | dark: prefix variants wire to the system color scheme. No manual theme switching code is needed; classes like dark:bg-gray-900 react to the OS setting. | Interface |
| Custom design tokens in tailwind.config.js | Generated tailwind.config.js extends the default theme with the app color palette from gasConfig, giving every className= call access to branded tokens. | Interface |
| Build-time class compilation for performance | NativeWind compiles all used Tailwind classes at build time rather than parsing strings at runtime, keeping animation and layout performance on par with StyleSheet. | Reliability |
Source: the Goodspeed generation pipeline · Styling
REAL GENERATED CODE
A snippet from a NativeWind app the studio shipped
This pattern comes straight out of the production groundwork every Goodspeed app is generated on. The studio generates NativeWind code like this for every app in the pipeline, not a hello-world sample you have to grow into a real app.
NativeWind type shim
// nativewind-env.d.ts: enables className= on React Native elements /// <reference types="nativewind/types" /> // components/ui/Button.tsx: utility classes in components export function Button({ label, onPress, variant = 'primary' }: ButtonProps) { return ( <Pressable className={ variant === 'primary' ? 'bg-brand-500 rounded-xl px-5 py-3 active:opacity-80' : 'border border-brand-500 rounded-xl px-5 py-3' } onPress={onPress} > <Text className="font-semibold text-white text-base">{label}</Text> </Pressable> ); }
Today's log