How to setup Native wind in Expo Project ?

Styling in React Native can be a bit tricky, especially when you're aiming for both performance and maintainability. That's where NativeWind comes in—an innovative tool that brings the utility-first styling of Tailwind CSS into the React Native ecosystem. If you're tired of juggling StyleSheets and want a more streamlined approach, NativeWind might just be the perfect solution for you. In this guide, we'll walk through the steps to set up NativeWind in your React Native project, from installation to best practices.

1. What is NativeWind?

NativeWind is a utility-first CSS framework tailored for React Native, inspired by Tailwind CSS. It allows you to write concise, utility-based styles directly within your components, avoiding the hassle of managing complex StyleSheets. NativeWind is designed to work seamlessly with React Native, making it easier to create responsive and consistent designs across platforms.

2. Why Choose NativeWind?

Before diving into the setup, let's explore some of the key benefits of using NativeWind:

• Ease of Use: NativeWind simplifies styling by allowing you to apply utility classes directly to your components.

• Consistency: By using a utility-first approach, your designs remain consistent and maintainable.

• Performance: NativeWind is optimized for performance, ensuring that your app remains fast and responsive.

• Scalability: As your project grows, NativeWind scales effortlessly, enabling you to maintain clean and organized code.

3. Prerequisites

Before setting up NativeWind, ensure that you have the following:

• A React Native project already set up. If you don't have one, you can create a new project using the following command:

npx create-expo-app

• Node.js installed on your machine.

• Basic knowledge of React Native and CSS.

4. Installation

Now, let's get NativeWind up and running in your project.

1. Install NativeWind and Tailwind CSS Dependencies:

   Start by installing the required packages. Open your terminal and navigate to your project directory, then run:

    npm install nativewind react-native-reanimated tailwindcss@3.3.2
   

2. Initialize Tailwind CSS Configuration:

Next, you need to initialize the Tailwind CSS configuration file. This file will allow you to customize your design system (e.g., colors, fonts, spacing). Run the following command:

npx tailwindcss init

This will create a tailwind.config.js file in your project root. You can now customize it according to your needs.

3.Configure NativeWind:

NativeWind requires a few tweaks to work seamlessly with React Native. In your tailwind.config.js file, make sure to extend the configuration as follows:

/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all of your component files.
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

This configuration ensures that Tailwind CSS scans your project files for class names, making them available in your app.

4.Add the Babel preset

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
    plugins: [
      // Required for expo-router
      "expo-router/babel",
      "react-native-reanimated/plugin",
    ]
  };
};

5. Start Using NativeWind:

With everything set up, you can now start using NativeWind in your components. Here's a simple example:

import { Pressable, SafeAreaView, StyleSheet, Text, View } from "react-native"
import React from "react"
import { router } from "expo-router"
import { StatusBar } from "expo-status-bar"

const index = () => {
  return (
    <SafeAreaView className="flex-1 ">
      <StatusBar hidden />
      <View className="flex-1 bg-black">
        <Text className="text-red-500 bg-red-50 ">ok</Text>

      </View>
    </SafeAreaView>
  )
}

export default index

Happy Coding : ) If you found any difficulty you can contact with me or comment here I will try to resolve your issue .