How to add NativeWind in React Native Expo

Are you a frontend developer who's fallen in love with the simplicity and power of Tailwind CSS? If so, you're not alone! I, too, was enamored by Tailwind's utility-first approach and the way it streamlined my workflow. However, when I made the transition to React Native, I found myself missing the convenience of Tailwind's classes terribly.

Writing CSS manually felt like a step back in time, and my productivity took a hit. That's when I found NativeWind, a game-changer for React Native developers who crave the same level of flexibility and ease that Tailwind offers.

NativeWind is a utility library that brings the magic of Tailwind CSS to your React Native projects, allowing you to style your components with the same familiar classes you know and love. Say goodbye to the tedious task of writing CSS from scratch and hello to a world of rapid development and consistent styling.

In this article, we'll dive deep into the world of NativeWind and explore how to integrate it into your React Native Expo project. Prepare to be amazed as you witness the seamless fusion of Tailwind's utility-first approach with the power of React Native.

So, I'm assuming you have already created an Expo app. Now, our mission is to make our app capable of writing Tailwind CSS code.

Add these two dependencies to your Expo project:

npm install nativewind
npm install --save-dev tailwindcss@3.3.2

Then, run npx tailwindcss init to create a tailwind.config.js file

// tailwind.config.js

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

Modify your babel.config.js

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

Believe it or not, that's it 🎉! Now your React Native app is eligible to use Tailwind CSS classes, just like your frontend app. Isn't that cool?