Skip to main content
Version: v4

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.

info

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: {},
},
}