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
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.
- SWC
- Babel
Next.js uses a jsconfig.json
/tsconfig.json
file to configure the jsxImportSource
.
{
"compilerOptions": {
"jsxImportSource": "nativewind"
}
}
module.exports = {
presets: ["next/babel"],
+ plugins: [
+ [
+ "@babel/plugin-transform-react-jsx",
+ {
+ runtime: "automatic",
+ importSource: "nativewind",
+ },
+ ],
+ ],
};
4. Transpile NativeWind
/** @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: {},
},
}