nativewind/apps/website/docs/quick-starts/expo.md

import StartCoding from "../_start-coding.md"

Expo

:::tip

A example of an Expo project can be found on Github

:::

1. Create the project

Create the project with the Expo CLI

npx create-expo-app my-app

cd my-app

You will need to install nativewind and it's peer dependency tailwindcss.

yarn add nativewind
yarn add --dev tailwindcss

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. Remember to replace <custom directory> with the actual name of your directory e.g. screens.

// tailwind.config.js

module.exports = {
- content: [],
+ content: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Add the Babel plugin

Modify your babel.config.js

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

Expo Web

When running on web, NativeWind is a compatability layer between Tailwind CSS and React Native.

You will need follow a Tailwind CSS installation guide and ensure NativeWind is transpiled.

Example webpack setup

A complete setup can be found on the Expo project example

:::caution

Expo Web only supports Webpack 4, please ensure you are only installing webpack loaders that that support Webpack 4. For example, The latest version of postcss-loader is not compatible with Webpack 4 and instead, postcss-loader@4.2.0 should be used.

https://github.com/expo/expo-cli/pull/3763

:::

Expo Web uses webpack, so one possible setup is adding PostCSS to your webpack.config.js and adding Tailwind CSS as a PostCSS plugin.

You can also add nativewind to your transpilation list through the @expo/webpack-config babel options.

// webpack.config.js
const path = require("path");
const createExpoWebpackConfigAsync = require("@expo/webpack-config");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: ["nativewind"],
      },
    },
    argv
  );

  config.module.rules.push({
    test: /\.css$/i,
    use: ["postcss-loader"],
  });

  return config;
};

Expo SDK <=45

Expo SDK <=45 supports React Native Web <=0.17 which cannot output classNames. You need to change the NativeWindStyleSheet output to use native for all platforms.

// App.js

import { NativeWindStyleSheet } from "nativewind";

NativeWindStyleSheet.setOutput({
  default: "native",
});