Using Tailwind CSS in React Native

In this article we will learn how to use Tailwind CSS in React Native applications. But before we begin, we should 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 packed with classes that can be composed to build any user interface, directly in your HTML file. The good thing of this framework is it doesn't impose any design specification, which means you're not restricted for creating any design of your choice.

It is highly performant and small in size, Tailwind automatically removes all unused CSS when building for production, it ships the smallest CSS bundle possible. In fact, most Tailwind projects ship less than 10kB of CSS to the client.

Now, we've understood what Tailwind is, let us use see how we define classes in our React App using JSX. For example, you could style a button with just a few classes which Tailwind offers.

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>

Let us move forward by understanding 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

Step 1. Set up project

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

Choose "Default new app" and then move into the project's directory.

js
cd my-nativewind-app

Step 2. Install NativeWind

Install nativewind and it's peer dependency tailwindcss.

js
yarn add nativewind
yarn add --dev tailwindcss

Step 3. 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: [],
  };

Step 4. Add Babel plugin

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

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

Thats it!

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>
    );
  }

TypeScript

NativeWind extends the React Native types via declaration merging. The simplest method to include the types is to create a new app.d.ts file and add a triple-slash directive referencing the types.

js
  /// <reference types="nativewind/types" />

Theme Configuration

Customizing the default theme for your project.

The theme section of your tailwind.config.js file is where you define your project’s color palette, type scale, fonts, border radius values, and more.

js
// tailwind.config.js
module.exports = {
  theme: {
      extend: {
         colors: {
            'blue': '#1fb6ff',
            'purple': '#7e5bef',
            'gray': '#8492a6',
                },
         spacing: {
             '2x': '20px',
             '3x': '30px',
                },
         borderRadius: {
             '4xl': '40px',
                }
            }
          }
       };

If you need theme values at runtime, its best to retrieve them directly from tailwind or your tailwind.config.js.

js
import colors from "tailwindcss/colors";

export function MyActivityIndicator(props) {
  return <ActivityIndicator size="small" color={colors.blue} {...props}  />;
};

Creating custom components

NativeWind also allow us to create our own components along with Tailwind classes.

Passing classes (or) style to components

When passing styles between components, they are compiled on the parent and then passed as a style prop to the child.

js
function MyComponent({ style }) {
  // You need to use style, className's classes are compiled into style object & passed as props.
  return <Text style={style} />;
}

<MyComponent className="font-bold" />

styled()

styled() is a Higher-Order Component which allows your component to accept either the tw or className props. These props are compiled into Stylesheet objects and passed to your component via the style prop.

js
import React from 'react';
import { Text, View, TouchableOpacity } from "react-native";
import { styled } from "nativewind";

const StyledText = styled(Text);
const StyledView = styled(View);
const StyledTouch = styled(TouchableOpacity)

function App() {
const onPress = () => console.log("Pressed");
  return (
    <StyledView className="flex-1">
      <StyledText tw="font-bold">Hello world.</StyledText>
      <StyledText className="font-bold">Hello world.</StyledText>
      <StyledTouch className="text-3xl p-5" onPress={onPress} >
          <StyledText className="font-medium text-orange-600">
            Press Here
          </StyledText>
      <StyledTouch>
    </StyledView>
  );
}

Conclusion

To sum up, Tailwind CSS won't restrict you for creating any design of your choice. You define that with adding classes for the required design.

I believe, this would be enough for getting started with Tailwind CSS in React Native. If you want to explore more, you can visit NativeWind and experiment.

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>