DEV Community: Alireza Mohsini

Taming the Beast: A Foolproof NativeWind + React Native Setup (v52+) - 2025

Alireza Mohsini — Fri, 31 Oct 2025 14:08:19 +0000

If you've tried to set up NativeWind (Tailwind CSS for React Native) in a new React Native project recently, you've likely run into a wall of cryptic errors involving the Metro bundler, the new require context, and missing modules. The rapid evolution of the React Native ecosystem post-0.72, especially with the shift towards a more "web-aligned" build system, has broken many older guides.

After much trial and error, I've found a specific combination of package versions that works together perfectly. This setup will get you from zero to styled in minutes, not hours.

The Problem

After React Native 0.72, the introduction of the New Architecture by default and changes to how Metro handles assets broke the standard tailwindcss setup. Common errors include:

Unable to resolve module 'react-native-safe-area-context'
Issues with the require.context in the tailwind.config.js file.
Metro bundler failures when trying to compile the Tailwind CSS.

The Solution: A Version-Locked, Battle-Tested Stack

The key is using versions of nativewind and tailwindcss that are compatible with the latest React Native build system, along with the crucial, updated native dependencies.

Here is the magic combination:

"dependencies": {
  "nativewind": "4.1.23",
  "tailwindcss": "3.4.17",
  "react-native-reanimated": "~3.16.1",
  "react-native-safe-area-context": "^4.12.0"
}

Let's set it up step-by-step.

Step-by-Step Setup Guide

Step 1: Create a New React Native Project

Start with a fresh project. I'll assume you're using the new "Compact" default template.

npx react-native@latest init MyWindApp
cd MyWindApp

Step 2: Install the Perfect Package Combo

This is the most critical step. Run this install command to get the exact versions we need.

npm install nativewind@4.1.23 tailwindcss@3.4.17 react-native-reanimated@~3.16.1 react-native-safe-area-context@^4.12.0

nativewind@4.1.23: This specific version is stable and avoids the compatibility issues present in some newer alpha/beta releases.
tailwindcss@3.4.17: A stable, feature-complete version of Tailwind that works seamlessly with the NativeWind plugin.
react-native-safe-area-context: This is a required peer dependency for NativeWind to handle safe areas. Explicitly installing the latest stable version ensures it's present.
react-native-reanimated: While not always a direct dependency for basic NativeWind, many modern RN libraries use it, and having it installed preemptively prevents a very common class of errors.

Step 3: Configure Tailwind CSS

Generate your tailwind.config.js file.

npx tailwindcss init

Update the generated tailwind.config.js file. The critical part is configuring the content paths so Tailwind can find your React Native components and purge unused styles.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  // Important: Use `.native` for React Native
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4: Configure Metro & Babel

We need to tell Metro to process the CSS files that NativeWind will generate.

Run metro config init or Create a metro.config.js file or run in your project root if it doesn't exist, and add the following configuration:

// metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname);

// This is the important part: Wrap the default config with NativeWind
module.exports = withNativeWind(config, { input: './global.css' });

Note: If you aren't using Expo, you can often use const { getDefaultConfig } = require("metro-config");.

Update your babel.config.js to include the NativeWind Babel plugin.

// babel.config.js
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    // Add this line
    'nativewind/babel',
  ],
};

Step 5: Create Your Global CSS File

Create a file called global.css in your project root. This is where your Tailwind directives will live.

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 6: Import the CSS and Apply the Provider

Finally, we need to import the CSS and wrap our app with the NativeWindProvider.

Open your App.tsx (or App.jsx) and modify it as follows:

// App.tsx
import React from 'react';
// 1. Import the CSS and the Provider
import { NativeWindProvider } from "nativewind";
import './global.css'; // Import the CSS file

// Your main App component
function App() {
  return (
    // 2. Wrap your app with the NativeWindProvider
    // note: not required to wrap and use native-wind-provider
    <NativeWindProvider>
      {/* Your existing app code starts here */}
      <View className="flex-1 items-center justify-center bg-white">
        <Text className="text-4xl font-bold text-blue-500">Hello, NativeWind!</Text>
        <StatusBar style="auto" />
      </View>
    </NativeWindProvider>
  );
}

export default App;

You're All Set! 🚀

That's it! Now you can use Tailwind's intuitive utility classes directly in your React Native components using the className prop.

Run your project:

npm run android
# or
npm run ios

You should see your beautifully styled "Hello, NativeWind!" text.

Troubleshooting Tips

Cache Clear: If things look weird, always clear your Metro cache: npm start -- --reset-cache
Restart Metro/Bundler: After installing new native dependencies, fully stop and restart your Metro bundler.
Check Versions: Double-check your package.json to ensure the versions match exactly. A single mismatched package can break the entire setup.

This combination of nativewind@4.1.23 and tailwindcss@3.4.17 has proven to be incredibly stable across multiple projects. It bypasses the current ecosystem growing pains and lets you focus on what's important: building a great app.

I hope this saves you hours of frustration. Happy coding!

Follow me on Linkedin aramoh3ni

How BEM (Block-Element-Modifier) CSS actually Work!

Alireza Mohsini — Wed, 31 May 2023 12:51:52 +0000

BEM, or Block-Element-Modifier, is a popular naming convention for writing CSS code. It was developed by the team at Yandex, a Russian search engine, as a way to create scalable and maintainable CSS code for their large and complex web projects. BEM has since become widely adopted by developers around the world and is recognized as one of the best practices for writing CSS.

The basic idea behind BEM is to create modular, reusable code blocks that can be combined to build larger web components. Each block represents a distinct part of the user interface, such as a header, footer, navigation menu, or form. Blocks can then be broken down into smaller elements, which are the individual components that make up the block. For example, a navigation menu block might consist of elements like the menu items, the logo, and the search bar.

BEM also allows for the use of modifiers, which are used to change the appearance or behavior of a block or element. Modifiers can be used to change the color, size, or layout of a block, or to add or remove certain features or functionality.

The naming convention used in BEM is what makes it so powerful. Each block, element, and modifier is given a unique, descriptive name that reflects its purpose and function. This makes it easy for developers to understand and organize their code, and for designers to make changes to the design without breaking the CSS.

Here's an example of how BEM might be used to stylea simple navigation menu:

HTML:

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item"><a href="#" class="nav__link">Home</a></li>
    <li class="nav__item"><a href="#" class="nav__link nav__link--active">About</a></li>
    <li class="nav__item"><a href="#" class="nav__link">Contact</a></li>
  </ul>
</nav>

CSS:

.nav {
  /* Styles for the navigation block */
}

.nav__list {
  /* Styles for the navigation list element */
}

.nav__item {
  /* Styles for the navigation item element */
}

.nav__link {
  /* Styles for the navigation link element */
}

.nav__link--active {
  /* Modifier for the active navigation link */
}

In this example, the "nav" block represents the overall navigation menu. The "nav_list", "navitem", and "navlink" elements represent the different parts of the navigation menu. The "nav_link--active" modifier is used to style the active link in the navigation menu.

One of the key benefits of BEM is that it allows for easy modification of the CSS code. If you need to change the style of the active navigation link, for example, you can simply update the "nav__link--active" modifier without affecting any ofthe other parts of the navigation menu. This makes it easier to maintain and update the CSS code over time, and reduces the risk of introducing errors or breaking the design.

Another benefit of BEM is that it promotes modularity and reusability of code. By breaking down the user interface into smaller blocks and elements, developers can create more flexible and adaptable components that can be used across different parts of the website. This can help to speed up development time and reduce code redundancy, which is especially important for large and complex web projects.

Overall, BEM is a powerful and flexible naming convention for writing CSS code. By using descriptive and consistent names for blocks, elements, and modifiers, developers can create more maintainable and scalable code that is easier to understand and modify over time. If you're looking for a best practice for writing CSS, BEM is definitely worth considering.

Learn More:

getbem.com/introduction

What is Dependency Injection + NestJs

Alireza Mohsini — Wed, 31 May 2023 12:45:06 +0000

Dependency Injection

Dependency injection is a design pattern used in software engineering that involves injecting dependencies, or external objects, into a class or method instead of having the class or method create or find the objects itself.

With dependency injection, the dependencies are provided to the class or method from outside, typically through constructor injection or setter injection. This makes the code more modular and easier to test, as the dependencies can be easily replaced with mock objects or stubs during testing.

Let's say you have a UserService class that needs to interact with a UserRepository to fetch user data. In traditional software development, you might create an instance of the UserRepository class inside the UserService class. However, with dependency injection, you can inject the UserRepository instance into the UserService class instead.

Here's an example of how to do this in NestJS:

import { Injectable } from '@nestjs/common';
import { UserRepository } from './user.repository';

@Injectable()
export class UserService {
  constructor(private readonly userRepository: UserRepository) {}

  async getUserById(id: string): Promise<User> {
    return this.userRepository.findById(id);
  }
}

In this example, the UserService class has a constructor that takes an instance of the UserRepository class as a parameter. The @Injectable() decorator tells NestJS that this class is injectable and should be managed by the dependency injection system.

Now, when you want to use the UserService class in another class or module, you can simply import it and let NestJS handle the injection of the UserRepository instance:

import { Module } from '@nestjs/common';
import { UserController } from './user.controller';
import { UserService } from './user.service';
import { UserRepository } from './user.repository';

@Module({
  controllers: [UserController],
  providers: [UserService, UserRepository],
})
export class UserModule {}

In this example, the UserModule imports the UserController, UserService, and UserRepository classes and adds them to the module's providers array. This tells NestJS to create instances of these classes and manage their dependencies using the dependency injection system.

Now, when you call the getUserById method on an instance of UserService, NestJS will automatically inject an instance of UserRepository into the constructor and use that instance to fetch user data. This makes the code more modular and easier to test, as you can easily replace the UserRepository instance with a mock object or stub during testing.