{

How to add tailwind CSS in react native application?


This example is a step-by-step guide tutorial to add 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 another framework.

There are multiple npm packages written for react-native.

The following packages rank in popularity.

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 useTailwind into a component.

import {useTailwind} from 'tailwind-rn';

useTailwind is a react hook that returns tailwind function.

This function takes classnames and returns a style object.

The output of these styles applies to react-native UI components such as text, 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.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.