Skip to main content
Version: v4

Expo Router


1. Install NativeWind

You will need to install nativewind@^4.0.1 and it's peer dependencies tailwindcss and react-native-reanimated.

npm install nativewind@^4.0.1 react-native-reanimated tailwindcss

Run pod-install to install Reanimated pod:

npx pod-install

2. Setup Tailwind CSS

Run npx tailwindcss init to create a tailwind.config.js file

Add the paths to all of your component files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
// NOTE: Update this to include the paths to all of your component files.
content: ["./app/**/*.{js,jsx,ts,tsx}"],
presets: [require("nativewind/preset")],
theme: {
extend: {},
plugins: [],

Create a CSS file and add the Tailwind directives

@tailwind base;
@tailwind components;
@tailwind utilities;

From here onwards, replace ./global.css with the relative path to the CSS file you just created

3. Add the Babel preset

module.exports = function (api) {
return {
presets: [
["babel-preset-expo", { jsxImportSource: "nativewind" }],
plugins: [
// Required for expo-router

4. Modify your metro.config.js

If your project does not have a metro.config.js run npx expo customize metro.config.js

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname, { isCSSEnabled: true })

module.exports = withNativeWind(config, { input: './global.css' })

5. Import your CSS file

import Slot from "expo-router/Slot";

// Import your global CSS file
import "../global.css"

export default Slot

6. TypeScript (optional)

Please follow the TypeScript guide.