Learn How to setup TailwindCSS(NativewindCss) in your React-Native Application

Step 1:

Install nativewind and tailwindcss

tailwindcss is not used during runtime so it can be added as a development dependency.

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

Step 2:

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}", "./screens/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 3:

Modify your babel.config.js

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

Step 4:

Create a file in your home directory react-native.config.js and add the below code.

module.exports = {
    project: {
      ios: {},
      android: {},
    },
    assets: ['./src/assets'],
  };

Please adjust the asset paths according to your project’s folder structure. For reference, my setup looks like this:

Step 5:

(For Typescript specific)

Create a file directory nativewind-env.d.ts and add the below code

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

NativeWind extends the React Native types via declaration merging. The simplest method to include the types is to create a new nativewind-env.d.ts file and add the above.

---

By following the steps outlined above, you can easily integrate Tailwind CSS into your React Native project.

If you encounter any issues or have questions, the Nativewind CSS documentation is an excellent resource for further guidance. Don’t hesitate to explore the extensive options Tailwind offers to tailor your design to your specific needs.

Happy coding, and enjoy the streamlined styling experience with Tailwind CSS in your react-native project.

---

If you encounter any issues or find errors in the guide, please let me know by leaving a comment below. I will review your feedback and make the necessary corrections. Your input is invaluable in ensuring the accuracy and quality of this tutorial.

Thank you for reading, and I look forward to your comments!