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.

SDK50+ | Framework-less | Next.js

Installation with Next.js

Nativewind can be used in a Next.js project that is already configured to use Expo or framework-less React Native Web.

Setting up a new Next.js project to use React Native Web is out of scope for these instructions.

Nativewind will only work with the /pages router or on "use client" routes. RSC support is in progress.

1. Setup Tailwind CSS

Simply configure Next.js as per the Tailwind CSS Next.js setup guide

2. Add the Nativewind preset

tailwind.config.js
 
module.exports = {
  content: [
    './pages/**/*.{js,jsx,ts,tsx}',
  ],
+ presets: [require('nativewind/preset')],
  theme: {
    extend: {},
  },
}

3. Update import source

Nativewind requires the jsxImportSource to be set to nativewind. The option to configure this depends on how you are compiling your Next.js project.

Next.js uses a jsconfig.json/tsconfig.json file to configure the jsxImportSource.

tsconfig.json
{
  "compilerOptions": {
    "jsxImportSource": "nativewind"
  }
}

4. Transpile Nativewind

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
+  transpilePackages: ["nativewind", "react-native-css-interop"],
}

Common issues

Errors about package imports.

import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
^^^^^^

SyntaxError: Cannot use import statement outside a module

This signals that you have incorrectly setup React Native Web and/or a dependency needs to be added to transpilePackages. This is out of scope for Nativewind.

Styles are not being applied

A common issue with Next.js is your styles are imported, but are being overridden by another StyleSheet due to the stylesheet import order.

A simple fix is simply make the Tailwind styles a higher specificity.

module.exports = {
  content: [
    './pages/**/*.{js,jsx,ts,tsx}',
  ],
  plugins: [require('nativewind/tailwind/css')],
+ important: 'html',
  theme: {
    extend: {},
  },
}

Additional Setup Guides

On this page