Skip to main content

Babel (compile only)

NativeWind provides two methods to style components, the className prop (which requires a Babel transformation) and the styled() wrapper. If you are exclusively using the styled() wrapper you can improve your build time by changing to compileOnly mode which skips the transform step.

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 install nativewind
npm install --save-dev tailwindcss

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", { mode: "compileOnly" }]],
};

Thats it 🎉​

Start writing code!

Without the Babel transform you will need to wrap your components in the styled higher-order component

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

+ const View = styled(RNView)

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