Installation

Expo | Framework-less | Next.js

If you'd like to skip manual setup and use Nativewind, you can use the following command to initialize a new Expo project with Nativewind and Tailwind CSS.

npx rn-new@latest --nativewind

Installation with React Native

1. Install Nativewind

You will need to install nativewind and its peer dependencies tailwindcss, react-native-css, react-native-reanimated and react-native-safe-area-context.

npx expo install nativewind react-native-css react-native-reanimated react-native-safe-area-context

2. Setup Tailwind CSS

Install Tailwind CSS

npx expo install tailwindcss @tailwindcss/postcss postcss

Add Tailwind to your PostCSS configuration

Add @tailwindcss/postcss to your postcss.config.mjs file, or wherever PostCSS is configured in your project.

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Create a CSS file and add the Tailwind directives.

global.css

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

From here onwards, replace ./global.css with the relative path to the CSS file you just created.

Instead of using the standard @tailwind, Nativewind recommends using the at-rules above which provide better compatibility with react-native-web

3. Create or modify your metro.config.js

Create a metro.config.js file in the root of your project if you don't already have one, then add the following configuration:

metro.config.js

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");
 
const config = getDefaultConfig(__dirname);
 
module.exports = withNativeWind(config);

4. Import your CSS file

App.js

import "./global.css"
 
export default App() {
  /* Your App */
}

You should import your CSS file inside the same file as top-most component of your app. Do not import it in the same file as calling AppRegistry.registerComponent or your app will not Fast Refresh correctly

5. TypeScript setup (optional)

If you're using TypeScript in your project, you'll need to set up the type definitions. Nativewind extends the React Native types via declaration merging. The simplest method to include the types is to create a new nativewind-env.d.ts file and add a triple-slash directive referencing the types.

/// <reference types="nativewind/types" />

CAUTION

Do not call this file:

nativewind.d.ts
The same name as a file or folder in the same directory e.g app.d.ts when an /app folder exists
The same name as a folder in node_modules, e.g react.d.ts

By doing so, your types will not be picked up by the TypeScript compiler.

Try it out!

Create a simple component to test your Nativewind setup:

App.tsx

import "./global.css"
import { Text, View } from "react-native";
 
export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-xl font-bold text-blue-500">
        Welcome to Nativewind!
      </Text>
    </View>
  );
}

This example shows:

Using className prop to style components
Tailwind utility classes like flex-1, items-center, justify-center
Color utilities like bg-white, text-blue-500
Typography utilities like text-xl, font-bold

If you see the styled text centered on a white background, Nativewind is working correctly!

Additional Setup Guides

Editor Setup - Learn how to set up your editor to use Nativewind
Other Bundlers - Learn how to use Nativewind with other bundlers

Installation

On this page