how-to-create-a-react-native-app-with-tailwind-css

How To Create A React Native App With Tailwind CSS

by

Introduction:

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.

Prerequisites:

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
 * https://github.com/kahnu044/react-native-app-with-tailwind-css
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import type {Node} from 'react';
import {
  SafeAreaView,
  Text,
  View,
} from 'react-native';

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

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

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

export default App;

For source code – https://github.com/kahnu044/react-native-app-with-tailwind-css

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

Output:

React Native App With Tailwind

For more info check the official docs of nativewind – here

For more tutorials – click here

Leave a Comment