Expo
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
- Yarn
npm install nativewind
npm install --save-dev tailwindcss@3.3.2
yarn add nativewind
yarn add --dev tailwindcss@3.3.2
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"],
};
};
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
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.
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",
});