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 tailwindcss@^3.4.17 react-native-reanimated react-native-safe-area-context

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 of your component files.
  content: ["./App.{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;

:::info

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

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.tsx
import "./global.css"
 
export default App() {
  /* Your App */
}

6. TypeScript

By default, the React Native Community CLI includes TypeScript support. Subsequently, you will need to follow the TypeScript guide to finish setting up Nativewind in your project.

Additional Setup Guides

On this page