Nativewind with React Native

What is Nativewind?

NativeWind 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.create for native.

It's goals are to to provide a consistent styling experience across all platforms, improve Developer UX and code maintainability.

NativeWind achieves this by pre-compiling your styles and uses a minimal runtime to selectively apply responsive styles.

Step 1: So let's see how we can install

Assuming you have already created react native community CLI

If not you can click here to create react native community CLI Project

You can visit this link over here to install nativewind

Step 2: Let's setup nativewind

Run npx tailwindcss init to create a tailwind.config.js file

Add the paths to all of your component files in your tailwind.config.js file.

// tailwind.config.js

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

In my case the <custom-folder> will get replaced by src since that's my folder where I'll be writing my code.

Step 3: Add the Babel plugin

Modify your babel.config.js, just add plugins below the presets property.

// babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
+ plugins: ["nativewind/babel"],
};

If you are using typescript you need to extend 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.

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

That's it now you can start using nativewind css in your project.

Oh wait a second, some of you might encounter an issue where it will give red color swirly underline to classname, to solve that problem you can just rename the above file to my-app.d.ts & that's it.

Enjoy!!!