How to add tailwind CSS in react native application?

This example is a step-by-step guide tutorial to adding tailwind CSS in react native framework.

Tailwind CSS is a utility CSS framework that provides a lot of CSS classes reused in your web or mobile applications.

This framework creates for responsive web applications, not for mobile.

React Native is a framework for mobile, It uses styles to design UI elements.

Writing own styles is a tedious task, We can reuse predefined classes provided by tailwind CSS. Another advantage is tailwind CSS bundle size is very less compared with other frameworks.

There are multiple npm packages written for react-native.

The following packages rank in popularity.

• tailwind-rn🔗
• tailwind-react-native-classnames🔗

In this tutorial, use the tailwind-rn npm package in react native application.

Please check the documentation as some of the original tailwind classes have support in these packages.

#Add tailwind CSS npm package to react native application

Open your react native project in command run below command

npm install tailwind-rn
(or)
yarn add tailwind-rn

It adds the dependency in package.json as follows

{
  "dependencies": {
    "tailwind-rn": "1.5.1"
  }
}

#React native tailwind CSS example

Let’s create a react native component -TailwindComponent. Next, Import use tailwind into a component.

import { useTailwind } from "tailwind-rn";

use tailwind is a react hook that returns thetailwind function.

This function takes class names and returns a style object.

The output of these styles applies to react-native UI components such as text, and view.

Here is an example code.

import React from "react";
import { SafeAreaView, View, Text } from "react-native";
import { useTailwind } from "tailwind-rn";

const TailwindComponent = () => {
  const tailwind = useTailwind();

  return (
    <SafeAreaView style={tailwind("h-full")}>
      <View style={tailwind("pt-12 items-center")}>
        <View style={tailwind("bg-blue-200 px-3 py-1 rounded-full")}>
          <Text style={tailwind("text-blue-700 font-semibold")}>
            React native Tailwind CSS example
          </Text>
        </View>
      </View>
    </SafeAreaView>
  );
};

export default TailwindComponent;

#Conclusion

It is a basic react native example, to add tailwind CSS styles.