How to Setup Expo with NativeWind

Fernando Chaves

July 21, 2024

Setting up Expo with NativeWind allows you to use Tailwind CSS-like styling in your React Native projects. This guide will walk you through the process step by step.

Prerequisites

• Node.js installed on your machine
• Expo CLI installed globally
• A basic understanding of React Native and Expo

Step 1: Create a new Expo project

First, let's create a new Expo project using the Expo CLI:

npx create-expo-app my-nativewind-project
cd my-nativewind-project

Step 2: Install NativeWind

Now, let's install NativeWind and its dependencies:

npm install nativewind
npm install --save-dev tailwindcss

Step 3: Configure Tailwind CSS

Create a `tailwind.config.js` file in your project root:

npx tailwindcss init

Then, update the `tailwind.config.js` file:

module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Step 4: Update your Babel configuration

In your `babel.config.js` file, add the NativeWind babel plugin:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ["nativewind/babel"],
  };
};

Step 5: Use NativeWind in your components

Now you can start using NativeWind in your components. Here's an example:

import { Text, View } from 'react-native';

export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-xl font-bold text-blue-500">
        Welcome to Expo with NativeWind!
      </Text>
    </View>
  );
}

Conclusion

You've now successfully set up Expo with NativeWind! You can start using Tailwind CSS classes in your React Native components for efficient and consistent styling.