Installation

Nativewind works with both Expo and framework-less React Native projects but Expo provides a more streamlined experience.

Web: If you'd like to use Metro to bundle for a website or App Clip and you are not using Expo, you will need either Expo's Metro config @expo/metro-config or to manually use Tailwind CLI to generate a CSS file.

Expo | Framework-less | Next.js

Before installing Nativewind, you will need to initialize your project with the React Native Community CLI.

Installation with Framework-less React Native

1. Install Nativewind

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

npm install nativewind react-native-reanimated react-native-safe-area-context@5.4.0
npm install -D tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11

Run pod-install to finish installation of react-native-reanimated

npx pod-install

2. Setup Tailwind CSS

Run npx tailwindcss init to create a tailwind.config.js file

Add the paths to all of your component files in your tailwind.config.js file.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all files that contain Nativewind classes.
  content: ["./App.tsx", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create a CSS file and add the Tailwind directives.

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

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

3. Add the Babel preset

babel.config.js

module.exports = {
- presets: ['<existing presets>'],
+ presets: ['<existing presets>', 'nativewind/babel'],
};

4. 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, mergeConfig } = require("@react-native/metro-config");
const { withNativeWind } = require("nativewind/metro");
 
const config = mergeConfig(getDefaultConfig(__dirname), {
  /* your config */
});
 
module.exports = withNativeWind(config, { input: "./global.css" });

5. Import your CSS file

App.js

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

6. 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