https://github.com/nativewind/nativewind

React Native utility-first universal design system - powered by Tailwind CSS
https://github.com/nativewind/nativewind

css nativewind react react-native react-native-web tailwind tailwindcss

Last synced: 22 days ago
JSON representation

React Native utility-first universal design system - powered by Tailwind CSS

• Host: GitHub
• URL: https://github.com/nativewind/nativewind
• Owner: nativewind
• License: mit
• Created: 2022-04-02T12:30:41.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2025-05-01T01:51:18.000Z (11 months ago)
• Last Synced: 2025-05-07T23:04:50.159Z (11 months ago)
• Topics: css, nativewind, react, react-native, react-native-web, tailwind, tailwindcss
• Language: TypeScript
• Homepage: https://nativewind.dev
• Size: 314 MB
• Stars: 6,167
• Watchers: 28
• Forks: 337
• Open Issues: 80
• Metadata Files:
  • Readme: README.md
  • Contributing: contributing.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

• awesome-react-native - NativeWind - Tailwind CSS for React Native with universal styling support. (Styling & Theming / Graphics & Drawing)

README

          




  

    

    
Nativewind


  



[![npm version](https://img.shields.io/npm/v/nativewind)](https://www.npmjs.com/package/nativewind)

[![npm downloads](https://img.shields.io/npm/dw/nativewind)](https://www.npmjs.com/package/nativewind)

[![Github](https://img.shields.io/github/license/nativewind/nativewind)](https://github.com/nativewind/nativewind)

[![Discord](https://img.shields.io/discord/968718419904057416?logo=discord&logoColor=ffffff&label=Discord&color=%235865F2)](https://discord.gg/ypNakAFQ65)

[![Twitter](https://img.shields.io/twitter/follow/nativewindcss?link=https%3A%2F%2Fx.com%2Ftailwindcss)](https://x.com/nativewindcss)






# About

Do you like using [Tailwind CSS](https://tailwindcss.com) to style your apps? This helps you do that in [React Native](https://reactnative.dev). Nativewind is **not** a component library, it's a styling library. If you're looking for component libraries that support Nativewind, [see below](https://github.com/nativewind/nativewind/tree/%40danstepanov/docs-v4.1?tab=readme-ov-file#what-if-im-looking-for-a-component-library-that-uses-nativewind).

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](https://www.nativewind.dev/docs/getting-started/installation) to configure Nativewind for your respective stack.

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

## Quickstart

We use [rn-new](https://rn.new) to quickly stand up an Expo project with Nativewind.

- `npx rn-new@latest --nativewind` (Expo SDK 54 + Nativewind v4.1)

- `npx rn-new@next --nativewind` (Expo SDK 54 + Nativewind v5)

## 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/` syntax

- **Children styles** - create simple layouts based upon parent class

## Contribution

[See this guide](https://github.com/nativewind/nativewind/blob/main/contributing.md)

# FAQ

## When is v5 landing?

[Nativewind v5 is in preview](https://nativewind.dev/v5)

## 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(, { 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.

### [NativewindUI](https://nativewindui.com)

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

### [React Native Reusables](https://reactnativereusables.com)

This open source library offers universal [shadcn/ui](https://ui.shadcn.com) via React Native. Use this as a foundation to develop your own high-quality component library.

### [gluestack](https://gluestack.io)

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](https://nativewind.dev).