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). It's 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).
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 options, below.
You can get started with any of the following options:
- Create Expo Stack:
npx create-expo-stack@latest --nativewind Create Expo App:(being fixed to work with v4)npx create-expo-app -e with-nativewind
- 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
- jsxImportSourceTransform only wraps native components, making it lighter and such that the className prop is accessible inside your component
- Respects all tailwind.config.js settings, including themes, custom values, and plugins
- Support for
- custom CSS properties, aka CSS Variables
- dark mode, arbitrary classes, and media queries
- animations and transitions
- container queries
container-typeand style-based container queries are not supported
- pseudo classes - hover / focus / active on compatible components
remunits- 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
groupandgroup/<name>syntax
- support for the
- Children styles - create simple layouts based upon parent class
- Fast and consistent style application via hot reload
- includes changes made to
tailwind.config.js
- includes changes made to
- Release:
mainbranch (currently v2.0.11)- You should use this version
- Experimental:
nextbranch (currently v4.1)- You probably shouldn't use this version
- Undergoing testing to move to a release version
- Bleeding Edge:
-alphasuffixed branches (no current alpha)- You should not use this version
- Used internally for moving towards a
nextversion
No. Expo is always exploring ways to handle styles better but NativeWind, as a project, will not be moving into the Expo organization.
Similar to Valve, we don't like the number 3. Nah, we had a V3 but it was a bad idea and needed to be reworked so we dropped it and moved on to v4.
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.
All breaking changes are outlined here.
Learn more on our website.