Use TailwindCSS in React Native projects

Posted by Suyash Singh

on March 22, 2024

React Native

In this blog post, we’ll walk you through the process of setting up TailwindCSS in a React Native CLI app. TailwindCSS offers a highly efficient way to style your app with utility-first CSS classes, which can significantly streamline your development process.

Benefits of Using TailwindCSS

TailwindCSS allows for rapid styling and consistent design, making it easier to maintain and scale your application. Its utility-first approach means you can apply styles directly in your JSX without needing to switch between files, reducing context switching and improving productivity. Tailwind’s responsive design features also ensure that your app looks great on all devices with minimal effort.

Steps to Integrate TailwindCSS

1. Install Required Packages

First, you need to install the nativewind package and TailwindCSS:

npm i nativewind
npm i --save-dev tailwindcss@3.3.2

2. Create the NativeWind Environment File

Create a file named nativewind-env.d.ts and add the following reference directive:

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

3. Initialize TailwindCSS

Run the following command to generate the TailwindCSS configuration file:

npx tailwindcss init

4. Configure TailwindCSS

Modify the generated tailwind.config.js file to include the paths to your React Native components:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./App.{js,jsx,ts,tsx}', './<custom-folder>/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Replace <custom-folder> with the actual folder(s) where your components are located.

5. Using TailwindCSS in Your App

Now, you can start using TailwindCSS classes in your React Native components. Here’s an example component that demonstrates how to apply TailwindCSS classes:

import React from 'react';
import {SafeAreaView, StatusBar, Text, View} from 'react-native';
 
const TailwindIsWorking = () => {
  return (
    <View className="flex gap-y-8 items-center justify-center bg-white w-screen h-screen">
      <Text className="text-4xl">🎉</Text>
      <Text className="text-black font-bold">TailwindCSS is working!</Text>
      <StatusBar barStyle="light-content" />
    </View>
  );
};
 
function App(): JSX.Element {
  return (
    <SafeAreaView>
      <TailwindIsWorking />
    </SafeAreaView>
  );
}
export default App;

6. Rebuild Your Android App

Finally, rebuild your Android app to see TailwindCSS in action:

npx react-native start

Congratulations! You now have TailwindCSS working in your React Native CLI app. Enjoy the streamlined styling process and enhanced development experience!

Feel free to customize your Tailwind configuration and explore the wide range of utility classes it offers to make your app look great effortlessly.