How To Create A React Native App With Tailwind CSS


In the world of mobile app development, React Native has emerged as a robust framework that allows developers to easily build cross-platform applications. Here we are going to learn A React Native App With Tailwind CSS.

However, styling these apps often involves a lot of manual work. Enter Tailwind CSS, a utility-first CSS framework that streamlines the styling process by providing pre-designed components. In this tutorial, we’ll walk you through the process of creating a React Native project integrated with Tailwind CSS, enabling you to design visually appealing and responsive mobile apps more efficiently.


Before we dive into the tutorial, ensure that you have the following prerequisites in place:

  1. Node.js: Make sure Node.js is installed on your machine. You can download it from the official Node.js website.
  2. React Native CLI: Install the React Native command-line interface globally on your system using the following command:
npm install -g react-native-cli

Steps to Create React Native App With Tailwind CSS

Step 1: Creating a React Native Project:

Open your terminal and create a new React Native project using the following command:

npx react-native init TestDeveloperNoob
cd TestDeveloperNoob

Step 2: You will need to install nativewind and it’s peer dependency tailwindcss.

npm i nativewind
npm i tailwindcss@3.3.2

Step 3: Set up Tailwind CSS

create a new file as tailwind.config.js and paste the below code to it.

module.exports = {
  content: ["./App.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  plugins: [],

Step 4: Add the Babel plugin, paste the below code to your babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ["nativewind/babel"],

That’s it, All done copy the below code and paste it to the App.tsx

 * Sample React Native App With Tailwind CSS
 * @format
 * @flow strict-local

import React from 'react';
import type {Node} from 'react';
import {
} from 'react-native';

const App: () => Node = () => {

  const backgroundStyle =
    'bg-[#748ef6] h-screen flex justify-center items-center';

  return (
    <SafeAreaView className={backgroundStyle}>
        <Text className="text-white text-2xl">Welcome To DeveloperNoob</Text>

export default App;

For source code –

To run the project use the below command with to different terminal.

// 1st terminal
npm start

//or with clear cache
npm start -- --reset-cache

// 2nd terminal
npm run android 


React Native App With Tailwind

For more info check the official docs of nativewindhere

For more tutorials – click here

Leave a Comment