DocsTailwind CSS with NativeWind

Tailwind CSS with NativeWind

Style effortlessly with utility-first Tailwind CSS powered by NativeWind v5.

NativeWind v5 brings Tailwind CSS v4 to React Native with compile-time styling, native performance, and 100% web-native code sharing.

How NativeWind Works

NativeWind compiles Tailwind utility classes directly into optimized StyleSheet objects on Native (iOS/Android) while outputting standard CSS on Web. This provides instant render times with zero runtime overhead.

StyleSheet vs. NativeWind Utility Classes

Compare traditional React Native StyleSheet code against clean NativeWind utility classNames:

React Native StyleSheet (Traditional)

import { StyleSheet, View, Text } from 'react-native';

export function Card({ title, subtitle }: CardProps) {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.subtitle}>{subtitle}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 16,
    borderRadius: 12,
    backgroundColor: '#ffffff',
    borderWidth: 1,
    borderColor: '#e5e7eb',
    shadowColor: '#000',
    shadowOpacity: 0.05,
    shadowRadius: 4,
  },
  title: { fontSize: 18, fontWeight: '600', color: '#111827' },
  subtitle: { fontSize: 14, color: '#6b7280', marginTop: 4 },
});

NativeWind v5 / Tailwind CSS

import { View, Text } from 'react-native';

export function Card({ title, subtitle }: CardProps) {
  return (
    <View className="p-4 rounded-xl bg-card border border-border shadow-xs">
      <Text className="text-lg font-semibold text-foreground">{title}</Text>
      <Text className="text-sm text-muted-foreground mt-1">{subtitle}</Text>
    </View>
  );
}

Global Theme Tokens & Dark Mode

Define design system tokens in global.css and switch themes instantly with dark: modifiers:

global.css

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --radius-xl: 0.75rem;
}

/* Dark mode variables automatically toggled via class */
.dark {
  --color-background: #09090b;
  --color-foreground: #fafafa;
}

Ready to build amazing universal apps with gluestack-ui pro?Get Started