Can you use Tailwind CSS in React Native?

Not Tailwind directly, but NativeWind brings the same utility-class API to React Native. You write className with Tailwind classes and NativeWind compiles them to React Native styles that work on iOS, Android, and web.

NativeWind is a library that lets you style React Native and Expo apps using Tailwind CSS class names via the className prop. It uses the Tailwind compiler, so most utility classes and your Tailwind config work the same way they do on the web.

Does NativeWind support dark mode?

Yes. Use the dark: variant on any class, like bg-white dark:bg-black. NativeWind follows the system color scheme by default, and you can control it manually if needed.

How to Style React Native with Tailwind CSS (NativeWind)

You can't use Tailwind CSS directly in React Native, but NativeWind gives you the same experience: you style components with the className prop using Tailwind utility classes, and NativeWind compiles them to native styles that run on iOS, Android, and web. If you like Tailwind on the web, this is the closest equivalent for Expo React Native.

Set up NativeWind

Install it alongside Tailwind:

npx expo install nativewind tailwindcss

Create a Tailwind config that uses the NativeWind preset:

module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: { extend: {} },
  plugins: [],
}

Add the Tailwind directives to a global.css and wire up Babel and Metro to process it. Then import that CSS once at your app's entry (in the root layout).

Style with className

Once it's set up, styling looks just like the web:

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

export function Card() {
  return (
    <View className="rounded-2xl bg-white p-5 dark:bg-zinc-900">
      <Text className="text-lg font-bold text-zinc-900 dark:text-white">Hello 👋</Text>
    </View>
  )
}

No StyleSheet.create, no separate style objects — the utilities are right on the component.

Dark mode

Use the dark: variant and NativeWind will follow the device's color scheme automatically:

<View className="bg-zinc-50 dark:bg-black">
  <Text className="text-zinc-900 dark:text-zinc-100">Adapts to the system theme</Text>
</View>

Reuse styles with variants

For components with multiple looks, keep variants in a small map instead of long conditional strings:

const variants = {
  primary: "bg-violet-600 active:bg-violet-700",
  outline: "border border-violet-600 bg-transparent",
}

This keeps your component readable and your styling consistent across the app.

When to use NativeWind

NativeWind is a great fit if your team already thinks in Tailwind, you want fast iteration, and you value styling that reads the same on web and native. If you need a heavily themed design system with runtime theme switching, also evaluate options like Tamagui — we compare them in our React Native UI kit roundup.

Prebuilt NativeWind components

Our Expo components and templates are all built with NativeWind and TypeScript, so you can drop them into any NativeWind project and start from polished, consistent UI instead of a blank screen.