Skip to main content

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