Skip to content
Goodspeed

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.

Generate a NativeWind app, freeSee how it works

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.

ItemDescriptionStrength
nativewind-env.d.ts type shimA one-line type shim enables className= on every React Native View, Text, and Image without requiring per-component type casts.Types
className= props throughout components/ui/ and components/forms/Every UI primitive uses Tailwind utility classes rather than StyleSheet.create, keeping styles colocated with markup and readable by any web developer.Components
Dark mode via class variantsdark: 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.Theming
Custom design tokens in tailwind.config.jsGenerated tailwind.config.js extends the default theme with the app color palette from gasConfig, giving every className= call access to branded tokens.Design
Build-time class compilation for performanceNativeWind compiles all used Tailwind classes at build time rather than parsing strings at runtime, keeping animation and layout performance on par with StyleSheet.Performance

Source: gas-template repository · Styling

REAL GENERATED CODE

A snippet from a NativeWind app the studio shipped

This pattern comes directly from the gas-template codebase, the foundation every Goodspeed app is generated on. The studio generates NativeWind code like this for every app in the pipeline, not just a hello-world scaffold.

  1. 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>
  );
}
GDaily Allergens

Today's log

Gluten
Tree nuts
Shellfish
Dairy
HomeScanLogProfile

All technologies

Keep exploring

→Tailwind CSS (NativeWind)→EAS Build→Expo→Expo Notifications→Expo Router
→Indie Hackers→Startups

START WITH NATIVEWIND

Your NativeWind app, generated

Generate my app, freeBrowse all technologies