Styling with NativeWind

Learn how NativeWind applies Tailwind CSS utilities to React Native components

How styling works

NativeWind brings Tailwind CSS to React Native by processing your styles at build time and using an optimized runtime to apply them. Instead of using StyleSheet.create, you write Tailwind utility classes directly in your components.

The className prop

NativeWind enables the className prop on React Native components, allowing you to use Tailwind utilities just like in web development:

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

export default function App() {
  return (
    <View className="justify-center items-center h-full">
      <Text className="text-red-500">Hello NativeWind</Text>
    </View>
  );
}

NativeWind processes your styles during the build step, not at runtime. This means your app stays fast and performant.

Build-time processing

NativeWind uses the Tailwind CSS compiler to process your styles during your application’s build step. This approach provides several benefits:

Fast runtime

Styles are pre-computed, so there’s minimal work at runtime

Small bundle

Only the styles you use are included in your bundle

Type safety

Full TypeScript support for className strings

CSS features

Access to CSS variables, media queries, and more

Platform-specific styling

NativeWind provides platform-specific variants to conditionally apply styles based on the platform:

iOS variant

<View className="ios:text-white android:text-black">
  <Text>Platform-specific text color</Text>
</View>

Android variant

<View className="android:bg-blue-500 ios:bg-green-500">
  <Text>Platform-specific background</Text>
</View>

Native variant

<View className="native:text-black web:text-red-500">
  <Text>Native vs Web styling</Text>
</View>

Web variant

<View className="web:shadow-lg native:elevation-lg">
  <Text>Platform-appropriate shadows</Text>
</View>

Available platform variants

ios

Applies styles only on iOS devices and simulators.

<Text className="ios:font-['System']">iOS system font</Text>

android

Applies styles only on Android devices and emulators.

<Text className="android:font-['SystemAndroid']">Android system font</Text>

native

Applies styles on both iOS and Android, but not web.

<View className="native:px-4 web:px-8">
  <Text>Different padding for native</Text>
</View>

web

Applies styles only when running on web platforms.

<View className="web:cursor-pointer native:active:opacity-70">
  <Text>Click or tap me</Text>
</View>

tv

Applies styles only on TV platforms (tvOS, Android TV).

<View className="tv:focus:scale-110">
  <Text>TV-optimized focus state</Text>
</View>

Custom utilities

NativeWind includes custom utilities specifically designed for React Native. These utilities map to native props and features:

Elevation (Android)

The elevation-* utility applies Android-specific elevation shadows:

<View className="elevation-sm">
  <Text>Small elevation shadow</Text>
</View>

Available elevation values:

Class	Elevation value
elevation-xs	1
elevation-sm	3
elevation-md	6
elevation-lg	8
elevation-xl	13
elevation-2xl	24
elevation-none	0

Tint color

The tint-* utility sets the tint color for components that support it:

<Image source={icon} className="tint-blue-500" />

Ripple effects (Android)

Android ripple effects can be customized with special utilities:

ripple-color.tsx

// Custom ripple color
<Pressable className="ripple-black">
  <Text>Tap me</Text>
</Pressable>

Text styling

NativeWind handles text styling with platform-specific considerations:

Line height

React Native requires unitless values for line-height. NativeWind automatically converts the leading-* utilities:

<Text className="leading-6">Properly spaced text</Text>

The leading-* utility is automatically converted from rem units to unitless values that React Native can understand.

System fonts

NativeWind configures platform-specific system fonts:

iOS fonts

/* iOS system fonts */
--font-sans: System;
--font-serif: Georgia;
--font-mono: Menlo;

<Text className="font-sans">iOS System font</Text>
<Text className="font-mono">iOS Menlo font</Text>

Android fonts

/* Android system fonts */
--font-sans: SystemAndroid;
--font-serif: sans-serif;
--font-mono: monospace;

<Text className="font-sans">Android System font</Text>
<Text className="font-mono">Android monospace font</Text>

Best practices

1. Import your global CSS file

   Make sure to import your global CSS file at the app entry point:

   import './global.css';
   import { View, Text } from 'react-native';
   
   export default function App() {
     return <View><Text>App content</Text></View>;
   }
   
2. Use platform variants strategically

   Apply platform-specific styles only when necessary. Most Tailwind utilities work across all platforms:

   // Good: Most styles work everywhere
   <View className="p-4 bg-white rounded-lg">
     <Text className="text-lg font-bold">Title</Text>
   </View>
   
   // Use variants only when needed
   <View className="ios:shadow-md android:elevation-md">
     <Text>Platform-specific shadow</Text>
   </View>
   
3. Leverage build-time processing

   Since styles are processed at build time, you can use complex class names without runtime performance concerns:

   <View className="flex-1 justify-center items-center bg-gradient-to-b from-blue-500 to-purple-600 p-8 rounded-2xl shadow-xl">
     <Text className="text-white text-2xl font-bold">Welcome</Text>
   </View>
   
4. Use TypeScript for autocomplete

   Enable TypeScript to get autocomplete for Tailwind classes:

   /// <reference types="nativewind/types" />
   

Not all CSS properties are supported in React Native. NativeWind will only apply properties that React Native can handle. Unsupported properties are silently ignored.

Next steps

Theming

Learn how to customize colors and design tokens

Dark mode

Implement dark mode in your application

Responsive design

Create responsive layouts with breakpoints

Custom styles

Create your own custom utilities and variants