NativeWind — Tailwind CSS for React Native

Introduction

NativeWind brings the Tailwind CSS utility-first workflow to React Native. Instead of writing StyleSheet objects, you apply familiar Tailwind class names directly to React Native components via the className prop. NativeWind compiles these classes at build time into optimized StyleSheet objects, giving you the developer experience of Tailwind with the performance of native styles.

What NativeWind Does

• Maps Tailwind CSS utility classes to React Native StyleSheet properties at build time
• Supports responsive breakpoints, dark mode, and platform-specific variants (ios:, android:, web:)
• Compiles className strings into cached StyleSheet objects for zero runtime overhead
• Integrates with Expo and bare React Native projects through a Babel plugin or Metro config
• Works with React Native Web for true cross-platform styling from a single class set

Architecture Overview

NativeWind v4 uses a compile-time approach. During the build, the Tailwind CSS compiler processes your className usage and generates a mapping from class names to React Native style objects. A Babel plugin transforms className props into style props referencing these precomputed objects. At runtime, NativeWind provides a thin wrapper that resolves variant conditions like dark mode, breakpoints, and platform. The result is standard React Native StyleSheet objects with no CSS runtime.

Self-Hosting & Configuration

• Install with npx expo install nativewind tailwindcss for Expo or npm install nativewind tailwindcss for bare React Native
• Initialize a tailwind.config.js with npx tailwindcss init and set the content paths to your source files
• Add the NativeWind Babel plugin to your babel.config.js
• Enable CSS interop in Metro config for v4 by following the migration guide
• Use the tailwind.config.js theme section to customize colors, spacing, fonts, and other design tokens

Key Features

• Full Tailwind CSS class coverage including flexbox, grid, spacing, typography, colors, and borders
• Platform variants (ios:, android:, web:) for conditional styles per platform
• Dark mode support using the Tailwind dark: prefix with automatic system preference detection
• Responsive breakpoints using sm:, md:, lg: prefixes adapted to device screen widths
• TypeScript support with className autocompletion in editors configured with Tailwind IntelliSense

Comparison with Similar Tools

• Tailwind CSS (Web) — the original utility framework for browsers; NativeWind adapts it for React Native's style system
• Tamagui — universal styling and UI library with its own design tokens; NativeWind reuses existing Tailwind knowledge and config
• Restyle (Shopify) — type-safe theming for React Native with a theme-first approach; NativeWind is utility-first matching the Tailwind mental model
• StyleSheet.create — React Native's built-in styling; NativeWind wraps it with Tailwind's expressive class syntax

FAQ

Q: Does NativeWind add runtime overhead? A: Minimal. Classes are compiled to StyleSheet objects at build time. The runtime layer only handles variant resolution like dark mode and breakpoints.

Q: Can I use custom Tailwind plugins? A: Yes, if the plugin generates CSS properties that map to React Native style properties. Plugins generating web-only CSS (like pseudo-elements) are not supported.

Q: Does NativeWind work with Expo? A: Yes. NativeWind v4 supports Expo SDK 50+ and includes an Expo config plugin for streamlined setup.

Q: Can I mix NativeWind classes with inline styles? A: Yes. You can use both className and style props on the same component; inline styles take precedence.

Sources

• https://github.com/nativewind/nativewind
• https://www.nativewind.dev