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