🚀 Setting Up TailwindCSS in React Native Using NativeWind

TailwindCSS has become one of the most popular utility-first CSS frameworks for web development. But did you know you can now bring the power of Tailwind to your React Native projects too? With NativeWind, styling your mobile app becomes faster, more consistent, and even more fun.

In this blog, we’ll walk through the setup of TailwindCSS in a React Native app using NativeWind and explore how you can start using utility classes just like you would in a web app.

🌱 Why NativeWind?

NativeWind is a library that brings TailwindCSS-style utility classes to React Native. Here's why it’s worth checking out:

• 💨 Write consistent styles using utility classes

• 🧱 No need for complex StyleSheet definitions

• ⚡ Optimized for performance

• 🌈 Supports variants like dark, sm, md via responsive classes

• 🔌 Works with Expo and bare React Native projects

📦 Prerequisites

Before you get started, make sure you have:

• Node.js installed

• A React Native or Expo project setup

• Basic knowledge of React Native development

🔧 Installation

Here’s a quick rundown of how to install NativeWind and set up Tailwind configuration in your project.

1. Install NativeWind and Tailwind dependencies

   “npm install nativewind tailwindcss”

2. Create global.css to your root project directory and paste following code

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
   

3. Configure Tailwind (tailwind.config.js)

   run “npx tailwindcss init” then replace default content of tailwind.config.js with following:

    /** @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}"],
        presets: [require("nativewind/preset")],
        theme: {
            extend: {},
        },
        plugins: [],
    };
   

4. Set up Babel config for NativeWind

   create babel.config.js in the root directory and paste following code

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

5. Wrap your app in the NativeWind provider

   inside the root layout i.e. app > _layout.tsx import global.css

🧪 Testing Your Setup

After setup, test your config by replacing a component with something like:

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

export default function Index() {
    return (
        <View className="flex-1 items-center justify-center">
            <Text className="text-3xl text-primary bg-secondary font-bold">
                Welcome to Expo Router!
            </Text>
        </View>
    );
}

⚠️ Common Gotchas

• Don’t forget to restart your dev server after changes in the config

• NativeWind uses className (not style) — make sure it's supported in the component you're styling

• Tailwind utilities are not supported in all third-party libraries — use them with NativeWind-aware components

📚 Additional Resources

• NativeWind Docs

• TailwindCSS Docs

• React Native Docs