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 both nativewind and tailwindcss

tailwindcss is not used during runtime so it can be added as a development dependency.

NPM

npm install nativewind
npm install --save-dev tailwindcss@3.3.2

Yarn

yarn add nativewind
yarn add --dev tailwindcss@3.3.2

caution

NativeWind does not work with TailwindCSS >3.3.2. If you wish to use the most current version, please upgrade to NativeWind v4

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"],
  };
};

4. Typescript

If your project uses typescript, you'll need to reference the nativewind types in a declaration file in the root of your project folder:

/** index.d.ts */

/// <reference types="nativewind/types" />

Thats it 🎉

Start writing code!

import { StatusBar } from 'expo-status-bar';
import React from 'react';
- import { StyleSheet, Text, View } from 'react-native';
+ import { Text, View } from 'react-native';

export default function App() {
  return (
-   <View style={styles.container}>
+   <View className="flex-1 items-center justify-center bg-white">
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

- const styles = StyleSheet.create({
-   container: {
-     flex: 1,
-     backgroundColor: '#fff',
-     alignItems: 'center',
-     justifyContent: 'center',
-   },
- });

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 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",
});