Overview

Nativewind v5 is a release candidate. Start with the RC installation, v4 migration, or preview upgrade. For the stable Tailwind 3 release, see v4.2.7 docs.

What is Nativewind?

Nativewind allows you to use Tailwind CSS to style your components in React Native. Styled components can be shared between all React Native platforms, using the best style engine for that platform; CSS StyleSheet on web and StyleSheet.create for native. Its goals are to provide a consistent styling experience across all platforms, improving Developer UX, component performance and code maintainability.

On native platforms, Nativewind performs two functions. First, at build time, it compiles your Tailwind CSS styles into StyleSheet.create objects and determines the conditional logic of styles (e.g. hover, focus, active, etc). Second, it has an efficient runtime system that applies the styles to your components. This means you can use the full power of Tailwind CSS, including media queries, container queries, and custom values, while still having the performance of a native style system.

On web, Nativewind is a small polyfill for adding className support to React Native Web.

Key Features

🌐 Universal Uses the best style system for each platform.

🖥️ DevUX Plugins for simple setup and improving intellisense support

✨ Media & Container queries Use modern mobile styling features like media and container queries (docs)

👪 Custom values (CSS Variables) Create themes, sub-themes and dynamic styles using custom values

✨ Pseudo classes hover / focus / active on compatible components (docs)

👪 Parent state styles automatically style children based upon parent pseudo classes (docs)

🔥 Lots of other features

• dark mode
• arbitrary classes
• platform selectors
• plugins

How is this different StyleSheet.create?

A full featured style system should have

• Static styles
• UI state styles (active, hover, focus, etc)
• Responsive styles (media queries, dynamic units)
• Container queries (styling based upon parent appearance)
• Device state styles (orientation, color scheme)
• Use the best rendering engine available

React Native's StyleSheet system only provides static styles, with other features left for the user to implement. By using Nativewind you can focus on writing your system instead of building your own custom style system.

On the web, it avoids injecting a StyleSheet at runtime by reusing the existing Tailwind CSS stylesheet, allowing you to use Server Side Rendering and much better initial page load performance.

In action

Nativewind handles both the Tailwind CSS compilation and the runtime styles. Metro applies import rewrites for supported React Native components.

Third party components may need an explicit styled wrapper if they do not forward className.

import { CustomText } from "third-party-text-component";
 
export function BoldText(props) {
  // You just need to write `className="<your styles>"`
  return <CustomText className="font-bold" {...props} />;
}

Styling can be dynamic and you can perform conditional logic and build up complex style objects.

import { Text } from "react-native";
 
export function MyText({ bold, italic, lineThrough, ...props }) {
  const classNames = [];
 
  if (bold) classNames.push("font-bold");
  if (italic) classNames.push("italic");
  if (lineThrough) classNames.push("line-through");
 
  return <Text className={classNames.join(" ")} {...props} />;
}

For components that need explicit mapping, use the returned styled wrapper. Nativewind RC0 does not export the v4 cssInterop or remapProps functions. See third party components for style and prop mapping examples.