WAYS OF USING TAILWIND CSS IN A REACT NATIVE PROJECT

This article aims at showing you how to use Tailwind CSS in React Native applications. But first, you need to know what Tailwind CSS is and how it can be helpful in developing good user interfaces.

What is Tailwind CSS?
A utility-first CSS framework composed of classes that can be put together to build user interface, directly in your HTML file. The best part of this framework is it doesn't impose any design guidelines to follow , which means you're not restricted for creating any design of your choice.

It is highly efficient and portable in size, Tailwind removes all unused CSS when building for production, it ships the smallest CSS bundle possible.

Now that we grasped what Tailwind is, let dive in to see how we define classes in our React App using JSX.

html
<button className="bg-blue-500 hover:bg-blue-700 
    text-white font-bold py-[5rem] px-4 rounded ml-4 mt-4">
  Button
</button>

Moving on, how can we use Tailwind CSS in React Native application?

NativeWind
It is a package that uses Tailwind CSS as scripting language to create a universal style system for React Native. NativeWind components can be shared between platforms and will output their styles as CSS Stylesheet on web and Stylesheet for native.

React Native's Stylesheet system only provides static styles, with other features left for the user to implement. By using NativeWind you can focus on writing your system instead of building your own custom style system.

Getting started

1. Project setup

To set up our project, we'll scaffold a new react Native app using react-native init. If you have already done this, skip this process, otherwise, run the command below:

js
npx react-native init my-nativewind-app

Cd into the project's directory.

js
cd my-nativewind-app

1. Install NativeWind

Install nativewind and it's peer dependency tailwindcss, using yarn or npm, but in this example I'll be using yarn instead.

js
yarn add nativewind
yarn add --dev tailwindcss

1. Set up Tailwind

Setup Tailwind CSS, run the command npx tailwindcss init to create a tailwind.config.js file

js
  // tailwind.config.js

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

1. Add Babel plugin

Add the Babel plugin, modify your babel.config.js.

js
  // babel.config.js
  module.exports = {
  - plugins: [],
  + plugins: ["nativewind/babel"],
  };

And that does it! Hurray you have Tailwind css working in your react native project.

js
  import { StatusBar } from 'expo-status-bar';
  import React from 'react';
  import { Text, View } from 'react-native';

  export default function App() {
    return (
    <View className="flex-1 items-center justify-center bg-white">
        <Text className="text-gray-400 text-md font-bold mt-2">
            Open up App.js to start working on your app!
        </Text>
        <StatusBar style="auto" />
      </View>
    );
  }

Thank you for taking the time read...