Babel (transform only)
Some frameworks (eg Next.js) provide an optimized pipeline for their CSS output and/or have first-class Tailwind support. In this case, you can use to framework to compile the styles and have Babel simply transform your components.
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", { mode: "transformOnly" }]],
};
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',
- },
- });