Pre-release v5 of Nativewind is now available!
#px-4 text-4xl text-balance tracking-tight leading-tight#text-5xl text-balance tracking-tight leading-tight

Style your React Native apps using Tailwind CSS.

The utility-first workflow you love from Tailwind CSS in your React Native applications. Enjoy consistent styling across platforms with the same intuitive classes.

Get Started
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
export default function WelcomeConsentScreen() { return ( <SafeAreaView style={ROOT_STYLE}> <View className="mx-auto max-w-sm flex-1 justify-between gap-4 px-8 py-4 "> <View className="ios:pt-8 pt-12">
<Text className="">
Welcome to your </Text>
<Text className="">
Application </Text> </View> <View className="gap-8"> {FEATURES.map((feature) => ( <View key={feature.title} className="flex-row gap-4"> <View className="pt-px"> <Icon name={feature.icon}
className=""
ios={{ renderingMode: 'hierarchical' }} /> </View> <View className="flex-1">
<Text className="">{feature.title}</Text>
<Text variant="footnote">{feature.description}</Text> </View> </View> ))} </View> </View> </SafeAreaView> ); } const FEATURES = [ { title: 'Profile Management', description: 'Easily update and manage your personal information, settings, and preferences', icon: 'account-circle-outline', }, { title: 'Secure Messaging', description: 'Chat securely with friends and family in real-time.', icon: 'message-processing', }, { title: 'Activity Tracking', description: 'Monitor your daily activities and track your progress over time.', icon: 'chart-timeline-variant', }, ] as const;

Welcome to your
Application

Profile Management

Easily update and manage your personal information, settings, and preferences

Secure Messaging

Chat securely with friends and family in real-time.

Activity Tracking

Monitor your daily activities and track your progress over time.

#text-2xl px-8 pb-4 pt-8 #text-4xl px-4 pb-8 pt-12 #text-4xl pb-8 pt-12
Why Nativewind?

#text-2xl px-8 pb-4 pt-8 #text-4xl px-4 pb-8 pt-12 #text-4xl pb-8 pt-12
Who is using Nativewind?

Built with Nativewind

Open source apps and libraries using Nativewind in their public codebases.

Ten projects selected from verified public package manifests. Project links and dependency evidence are included below.

#text-2xl px-8 pb-4 pt-8 #text-4xl px-4 pb-8 pt-12 #text-4xl pb-8 pt-12
UI Component Kits