Skip to content
React Native Tailwind

Quick Start

1. Add Babel Plugin

Section titled “1. Add Babel Plugin”

Update your babel.config.js to include the React Native Tailwind plugin:

module.exports = {
  presets: ["module:@react-native/babel-preset"],
  plugins: [
    "@mgcrea/react-native-tailwind/babel", // Add this line
  ],
};

2. Enable TypeScript Support (TypeScript Projects)

Section titled “2. Enable TypeScript Support (TypeScript Projects)”

Create a type declaration file in your project to enable className prop autocomplete:

Create src/types/react-native-tailwind.d.ts:

import "@mgcrea/react-native-tailwind/react-native";

This file will be automatically picked up by TypeScript and enables autocomplete for the className prop on all React Native components.

3. Start Using className

Section titled “3. Start Using className”

You’re ready to use Tailwind-style classes in your React Native components!

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


export function MyComponent() {
  return (
    <View className="flex-1 bg-gray-100 p-4">
      <Text className="text-xl font-bold text-blue-500">Hello, Tailwind!</Text>
    </View>
  );
}

Clear Metro Cache (If Needed)

Section titled “Clear Metro Cache (If Needed)”

After adding the Babel plugin, you may need to clear Metro’s cache:

Terminal window
npx react-native start --reset-cache

What’s Next?

Section titled “What’s Next?”