Use Tailwind CSS in React Native Expo

If you've been diving into the world of React Native Expo, you might have noticed that integrating Tailwind CSS isn't as straightforward as it is in traditional web development. Fear not, for I've cracked the code to bring the power of Tailwind CSS to your React Native Expo projects.

Why Tailwind CSS?

Before we dive into the how, let's quickly revisit why Tailwind CSS is a fantastic choice for styling your applications. Tailwind CSS is a utility-first CSS framework that allows you to build designs directly in your markup, providing a low-level utility for building designs without losing the flexibility of traditional CSS. With a vast array of pre-built utility classes, Tailwind CSS streamlines your styling process and promotes consistency across your project.

Setting Up Your React Native Expo Project

Expo version or SDK must be greater than or equal 46.0.0
Assuming you already have a React Native Expo project, the first step is to install the necessary dependencies. Open your terminal and run the following commands:

yarn add nativewind
yarn add --dev tailwindcss postcss autoprefixer
npx tailwindcss init

Configuring Tailwind CSS

once the packages are installed, In the root of your project, already created a tailwind.config.js or create the tailwind.config.js file instead and add the following:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './App.{js,jsx,ts,tsx}',
        './screens/**/*.{js,jsx,ts,tsx}',
        './pages/**/*.{js,jsx,ts,tsx}',
        './components/**/*.{js,jsx,ts,tsx}',
        './src/**/*.{js,jsx,ts,tsx}',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

Configuring Post CSS Config

create postcss.config.js file in your root directory and paste these codes:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

Configuring Tailwind CSS Utilities className (You can Ignore this step if you're using JavaScript)

For getting className suggestion in your React Native components create a app.d.ts file in your src directory and paste these lines:

// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference types="nativewind/types" />

Configuring Tailwind CSS For Expo Web

create a global.css file into your root directory and paste these lines:

@tailwind base;
@tailwind components;
@tailwind utilities;

from you App.jsx or App.tsx file import the file like this:

import './global.css';

Conclusion

Integrating Tailwind CSS into your React Native Expo project might seem elusive at first, but with the right setup and configuration, you can enjoy the benefits of a utility-first CSS framework in your mobile app development. Enhance your styling workflow, maintain consistency, and boost productivity with Tailwind CSS and React Native Expo. Happy coding!