Skip to main content
Version: v4

Expo Router

Installation​

1. Install NativeWind​

You will need to install nativewind and it's peer dependencies tailwindcss, react-native-reanimated and react-native-safe-area-context

npm install nativewind tailwindcss react-native-reanimated react-native-safe-area-context

Non-Expo projects

Run pod-install to finish installation of react-native-reanimated

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.

tailwind.config.js
/** @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

global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
info

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

3. Add the Babel preset​

babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

4. Modify your metro.config.js​

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

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

const config = getDefaultConfig(__dirname);

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

5. Import your CSS file​

app/_layout.js
import { Slot } from "expo-router";

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

export default Slot;

6. TypeScript (optional)​

Please follow the TypeScript guide.