nativewind/website/docs/frameworks/nextjs.md

Next.js

:::note

This guide assumes you already have Next.js configued with React Native Web or Next.js with Expo for Web

:::

Setup

1. Compilation

Next.js has built in support for both Babel and PostCSS, so either compilation guide is suitable. You can also manually setup the Tailwind CLI.

• Babel
• Babel (Compile Only)
• PostCSS
• Tailwind CLI

If you willing to try bleeding-edge features, you can also use Next.js to output CSS style sheets by following PostCSS (CSS) 🔬. This will provide the best performance and features and allow you to use the SWC compiler.

2. Transpilation

Unlike Metro, Next.js does not transpile node_modules. You will need to add next-transpile-modules to your next.config.js

npm install --save-dev next-transpile-modules

Follow the setup instructions to add tailwindcss-react-native

// An example next.config.js
const withTM = require("next-transpile-modules")([
  "tailwindcss-react-native",
  "@react-native-community/hooks", // A dependancy used at runtime.
]);

module.exports = withTM({});