Babel

The default babel configuration will both compile the Tailwind CSS styles and transform any component with the className attributed into a styled version.

This is the recommended configuration as it provides the fastest setup and best DX experience, with zero configuration needed for Tailwind Intellisense within your IDE.

Setup

1. Install the dependencies

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 Tailwindcss

Tailwindcss requires a tailwind.config.js file with the content section configured to include the paths to all of your components and any other source files that contain Tailwind class names.

If you are not already familiar with Tailwind CSS, we recommend reading its configuration documentation

You will need to customise content to match your project's folder structure.

// tailwind.config.js
module.exports = {
  content: [
    "./screens/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  // ...
};

3. Configure your babel.config.js

// babel.config.js
module.exports = {
  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',
-   },
- });

Configuring what is transformed

When targeting Web you may be using components that should not be transformed.

By default native components (e.g. div) are not transformed.

However if you are using a web only library such as react-select, you can disabled the transform on components imported from this library.

Either by explicitly stating which modules can be transformed.

// babel.config.js
module.exports = {
- plugins: ["nativewind/babel"],
+ plugins: [
+   [
+    "nativewind/babel"
+    { allowModuleTransform: ["moti"] }
+   ]
+ ],
};

Or blocking modules you don't want transformed.

// babel.config.js
module.exports = {
- plugins: ["nativewind/babel"],
+ plugins: [
+   [
+    "nativewind/babel"
+    { blockModuleTransform: ["react-select"] }
+   ]
+ ],
};