How to use Tailwind CSS in React Native

Introduction

Setting up Tailwind CSS in React Native can be difficult, while React Native and Tailwind CSS are two of the most successful open-source projects, each with over 60k stars on GitHub. Even so, react native those not support Tailwind out of the box since, by default; React Native uses the yoga layout for flex displays. Some advantages of working with Tailwind CSS are the following

• Faster development: Tailwind CSS makes it easier and faster to build responsive user interfaces. The pre-defined utility classes help you quickly style elements without writing custom CSS code.
• Consistency: Tailwind CSS provides a consistent design system that can be used across your entire project. This helps ensure that your application looks and feels the same no matter where it’s used.
• Customization: Tailwind CSS is highly customizable, and you can easily modify the default utility classes or create your own to fit your specific needs.

this article will explore two ways to use Tailwind CSS in React Native.

1. NativeWind

NativeWind is a package that uses Tailwind CSS as a scripting language to create a style system for React Native. It’s the most popular package, with over 2.2k on GitHub. NativeWind offers some features, such as:-

• Pseudo-classes
• Pre-complied
• fast running

and many more. To get started with nativeWind, follow the following steps

1. Create a blank project with expo-go; run the following command.

 yarn create expo-app nativewind

2. next, run the project for that, and run the command that follows

yarn start

This will open the expo application; now, we need to install native wind and to do so, run the command that follows

yarn add nativewind
yarn add --dev tailwindcss

now we need to set up the TailWind.

Setup Tailwind CSS

To set up Tailwind CSS, we need to install Tailwind CSS locally in your project; for that, run the command below.

npx tailwindcss init

This will create the tailwind.config.js file, which is used for tailwind configs, and modify the file to look like this.

// tailwind.config.js

module.exports = {
 content: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

After that, we need to create a file for the configurations, so go ahead and create a file called babel.config.js with the following formats.

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
  plugins: ["nativewind/babel"],
  };
};

Now that’s done, you can start writing tailwind CSS in your application to test that modify your App.js as follows.

import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";

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

Now your application is ready, and you can start writing tailwind CSS in your application 😀.

2.Tailwind-RN

In the section above we saw how to setup tailwind css for React native using native wind; in this section, we are going to see how to do the same with tailwind-rn, which is a new package that offers the same possibilities as the native wind with over 2k stars on GitHub.

To get started, we will install tailwind-rn in our project by doing

npm install tailwind-rn

Now that the dependency is set up, we must configure tailwind-rn for tailwind css to start working out of the box; run the following command.

npx setup-tailwind-rn

This command will create some necessary files and install needed dependencies jus wait for the command to finish; after that, we will need to update your App.js to test the installation.

// App.js

import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";
import { TailwindProvider } from "tailwind-rn";
import utilities from "./tailwind.json";

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

  return <Text style={tailwind("text-blue-600")}>Hello world</Text>;
};

export default function App() {
  return (
    <TailwindProvider utilities={utilities}>
      <MyComponent />
    </TailwindProvider>
  );
}

And that’s it. You can now run your tailwind styles in react-native without any issues.

Conclusion

In this article, we saw how to set up Tailwind for react native, using native-tailwind and tailwind-rn, which are two great packages for the code source of the project; they can be found here. If you face any issues, feel free to ask in the comments.