TAILWIND IN REACT NATIVE: NATIVEWIND GUIDE

Have you ever tried building React Native interfaces and felt that managing styles quickly becomes messy and repetitive? Maybe you’ve used StyleSheet.create for everything and wished there was a faster, more consistent way to apply styles across components. If that sounds familiar, then you might want to try Tailwind.

But Tailwind doesn’t work directly with React Native. NativeWind solves that by bringing Tailwind-style utilities into React Native while keeping styles compiled for native performance and clarity.

In this guide, we’ll cover what NativeWind is, how to set it up in your project, how to style components using class names, and the common tips and pitfalls to keep in mind.

What Is NativeWind?

NativeWind lets you use Tailwind-style utility classes inside React Native. It doesn’t use web CSS but compiles those class names into a native StyleSheet.create objects during build time. At runtime, it applies them instantly, so your app stays fast.

It also adjusts to each platform. On mobile, it utilizes the native style engine. On the web, it provides limited support for the className prop through React Native Web. This makes it possible to share the same styling logic across iOS, Android, and the browser.

In short, NativeWind gives you Tailwind’s quick styling workflow with React Native’s native performance and consistency.

Why Use Tailwind-Style Utilities in React Native?

Writing and maintaining styles in React Native can be slow. You often repeat the same properties across components. NativeWind fixes that by letting you use short, clear class names like flex-1 or bg-blue-500 directly in your code.

It makes styling faster, keeps designs consistent across platforms, and removes the need for large style files. You also get modern features like responsive layouts, themes, and state styles such as hover and focus, all handled automatically.

In short, it saves time, reduces clutter, and keeps your React Native code simple to read and maintain.

How to Set Up NativeWind?

You can use NativeWind with both Expo and regular React Native projects. The steps are almost the same, but Expo makes setup easier.

1. Install packages

Run this command inside your project folder:

npm install nativewind tailwindcss react-native-reanimated react-native-safe-area-context
npm install --save-dev prettier-plugin-tailwindcss

These packages add NativeWind, Tailwind, and the necessary tools to work together.

2. Initialize Tailwind

Create a Tailwind config file by running:

npx tailwindcss init

Then edit the generated tailwind.config.js file to include your component paths:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. Create a global style file

Make a new file named global.css and add this:

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

This file connects Tailwind’s utility classes to your app.

4. Update Babel configuration

In your babel.config.js, include NativeWind so it can process class names:

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

5. Update Metro configuration

In metro.config.js, add NativeWind’s helper:

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);
module.exports = withNativeWind(config, { input: "./global.css" });

6. Import the CSS file

Open your entry file (for example App.js) and import your global.css:

import "./global.css";

7. Try it out

Test if everything works by adding a simple component:

import { View, Text } from "react-native";
import "./global.css";

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

If the styles apply correctly, your setup is complete.

Using Tailwind Classes in React Native Components

Once NativeWind is installed, you can start using Tailwind-style classes in your components through the className prop. This is similar to how you would use it in web projects, but here the styles are compiled into native layouts.

Here’s a basic example:

import { View, Text } from "react-native";
import "./global.css";

export default function Welcome() {
  return (
    <View className="flex-1 items-center justify-center bg-gray-100">
      <Text className="text-2xl font-semibold text-blue-600">
        Welcome to NativeWind
      </Text>
    </View>
  );
}

In this example:

flex-1 makes the container take up the full screen height.
items-center and justify-center center the content both ways.
bg-gray-100 gives a light background color.
text-2xl, font-semibold, and text-blue-600 style the text quickly without creating a separate stylesheet.

You can also add conditional classes dynamically. For example, change the color when a value changes:

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

export default function StatusMessage({ success }) {
  const colorClass = success ? "text-green-600" : "text-red-600";
  return (
    <View className="p-4">
      <Text className={`text-lg font-medium ${colorClass}`}>
        {success ? "Upload complete" : "Upload failed"}
      </Text>
    </View>
  );
}

This pattern is simple to read and avoids nested style objects.

NativeWind also supports more complex components. For instance, if you use lists or SVGs, you can still style them with className. Here’s a quick list example:

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

export default function UserList({ users }) {
  return (
    <FlatList
      data={users}
      keyExtractor={(item) => item.id}
      className="bg-white"
      contentContainerClassName="p-4"
      renderItem={({ item }) => (
        <Text className="py-2 border-b border-gray-200 text-base">
          {item.name}
        </Text>
      )}
    />
  );
}

By using className consistently, you can keep your layout logic in one place while maintaining clean, reusable code.

Wrapping Up

First, double-check your setup. Most styling issues come from missing configurations, like forgetting to add the Babel plugin or setting the wrong file paths in tailwind.config.js. If your classes aren’t working, revisit those files first.

Second, remember that NativeWind isn’t Tailwind for browsers. It doesn’t inject CSS into the DOM. Instead, it compiles your classes into native React Native styles, which means performance stays just as fast as using StyleSheet.create.

Be mindful of conditional logic as well. It’s fine to toggle a few classes dynamically, but avoid doing it in-line everywhere. Keep your class logic simple and consistent for better readability and debugging.

If you’re using third-party components, map their props properly so className applies as expected. This keeps styles unified across your custom and imported elements.

Platforms

Features

Integrations

Can You Use Tailwind in React Native?