nativewind/website/docs/frameworks/nextjs.md

sidebar_position

sidebar_position
2

Next.js

:::note

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

:::

1. Setup compilation

As Next.js applications run on the web, you will most likely want to output CSS by following PostCSS (CSS) 🔬. This will provide the best performance and features and allow you to use the SWC compiler.

You can still use React Native StyleSheets by following one of these guides:

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

2. Setup 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({});