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.

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