How to Use Tailwind CSS with React Native?

Tailwind CSS is one of the most popular utility-first CSS frameworks among developers because it has fast speeds, a flexible way of designing pages, and consistent styles. However, when it comes to building applications for mobile devices, some developers may have questions about whether they can use Tailwind CSS while developing in React Native.

Yes, you can use Tailwind CSS in your React Native project!

Though React Native does not use CSS in the same manner as traditional web apps, you can still benefit from Tailwind’s utility-first method by employing NativeWind or Tailwind React Native Classnames (twrnc). These tools allow you to utilize Tailwind’s capabilities within the mobile ecosystem so that all platforms have unified styling with intuitive classes.

You will discover how to setup and implement Tailwind CSS in your React Native project step-by-step in this guide.

Steps to Use Tailwind CSS with React Native

Step 1: Install Nativewind

yarn add nativewind react-native-reanimated react-native-safe-area-context@5.4.0

yarn add --dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11

Step 2: Set up Tailwind CSS

Run npx tailwindcss init to create a tailwind.config.js file

Add the paths to all of your component files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */

module.exports = {

  // NOTE: Update this to include the paths to all files that contain Nativewind classes.

  content: ["./App.tsx", "./components/**/*.{js,jsx,ts,tsx}"],

  presets: [require("nativewind/preset")],

  theme: {

    extend: {},

  },

  plugins: [],

}

Create a CSS file and add the Tailwind directives.

@tailwind base;

@tailwind components;

@tailwind utilities;

Step 3: Add the Babel preset

module.exports = {

 presets: ['<existing presets>', 'nativewind/babel'],

};

Step 4: Modify your metro.config.js

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const { withNativeWind } = require("nativewind/metro");

const config = mergeConfig(getDefaultConfig(__dirname), {

  /* your config */

});

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

Step 5: TypeScript setup

Create a new nativewind-env.d.ts file

/// <reference types="nativewind/types" />

Try it out!

Create a simple component to test your Nativewind setup:

import "./global.css"

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

export default function App() {

  return (

    <View className="flex-1 items-center justify-center bg-white">

      <Text className="text-xl font-bold text-blue-500">

        Welcome to Nativewind!

      </Text>

    </View>

  );

}

Conclusion:

Utilizing Tailwind CSS within React Native is not only doable, but it’s also beneficial. With the ability to write less code and do things more modularly using NativeWind (or other comparable products), developers can create professional mobile app development experiences while maximizing their overall productivity.

FAQ

1. Is it possible to use Tailwind CSS in React Native directly?

No. React Native does not utilize traditional CSS, but you can take advantage of Tailwind-like utilities via NativeWind and twrnc.

2. Which is the best Tailwind library for React Native?

The number one choice is NativeWind, as it includes numerous features such as themes, animations, and complete compatibility with Tailwind CSS.