...

NativeWind

The utility-first workflow you love from Tailwind CSS in your React Native applications.
github-icon
GitHub
6.83kstar-icon
Created 3 years ago, last commit a day ago
70 contributors
3.3k commits
Stars added on GitHub, month by month
8
9
10
11
12
1
2
3
4
5
6
7
2024
2025
Stars added on GitHub, per day, on average
Yesterday
+3star-icon
Last week
+5.7
star-icon /day
Last month
+5.2
star-icon /day
Last 12 months
+5.5
star-icon /day
npmPackage on NPM
Monthly downloads on NPM
8
9
10
11
12
1
2
3
4
5
6
7
2024
2025
README

Tailwind CSS

Nativewind

npm version npm downloads Github Discord Twitter


About

Do you like using Tailwind CSS to style your apps? This helps you do that in React Native. Nativewind is not a component library, it's a styling library. If you're looking for component libraries that support Nativewind, see below.

Nativewind makes sure you're using the best style engine for any given platform (e.g. CSS StyleSheet or StyleSheet.create). Its goals are to to provide a consistent styling experience across all platforms, improving developer UX, component performance, and code maintainability.

Nativewind processes your styles during your application's build step and uses a minimal runtime to selectively apply reactive styles (eg changes to device orientation, light dark mode).

Installation

If you have an existing project, use these guides to configure Nativewind for your respective stack.

Alternatively, you can create a new pre-configured project via our Quickstart below.

Quickstart

Features

  • Works on all RN platforms, uses the best style system for each platform.
  • Uses the Tailwind CSS compiler
  • Styles are computed at build time
  • Small runtime keeps your components fast
  • Support for
    • Custom CSS properties, aka CSS Variables
    • Dark mode, arbitrary classes, and media queries
    • Animations and transitions
    • Container queries
      • container-type and style-based container queries are not supported
    • Pseudo classes - hover / focus / active on compatible components
    • rem units
    • Theme functions and nested functions
    • React 18 Suspense API
    • Custom CSS
  • Styling based on parent state modifiers - automatically style children based upon parent pseudo classes
    • Support for the group and group/<name> syntax
  • Children styles - create simple layouts based upon parent class

Contribution

See this guide

FAQ

When is v5 landing?

Soon.

Is it safe to use v4?

Yes.

Is Nativewind moving to Expo?

No.

Can we disable auto-adding nativewind types using a setting or something? I already have the settings using compilerOptions.types, so I would like to disable the file generation.

withNativeWind(<config>, { disableTypeScriptGeneration: true })

What if I'm looking for a component library that uses Nativewind?

There are a number of different component libraries available that use Nativewind to achieve different results. You should pick the one that best suits your needs.

This multi-platform library focuses on achieving native feel for each individual platform using the familiar interface of Tailwind CSS.

This open source library offers universal shadcn/ui via React Native. Use this as a foundation to develop your own high-quality component library.

From the folks that brought you NativeBase, this library offers customizable cross-platform components designed to look & behave cleanly on every platform.

Documentation

Learn more on our website.

Vercel OSS Program