Last updated on October 14, 2025

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

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

1. Install Nativewind

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

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.

Create a CSS file and add the Tailwind directives.

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

3. Add the Babel preset

4. 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:

5. Import your CSS file

6. Modify your app.json

Switch the bundler to use the Metro bundler

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

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.

Create a simple component to test your Nativewind setup:

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!

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