How Install Nativewind In React Native Expo Project

If You want to use tailwindcss in React Native App You must use Nativewind. Nativewind allows us to use Tailwind CSS to style your components in React Native Application.

First Create a React Native application

npx create-expo-app@latest enterappname

enterappname change your app name

npx expo install nativewind react-native-reanimated@~3.17.4 react-native-safe-area-context@5.4.0

npx expo install -D tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11

if top code not working type

npx expo install tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11

npx tailwindcss init

this command create a  tailwind.config.js file just open this file and paste below code

/** @type {import('tailwindcss').Config} / module.exports = { // NOTE: Update this to include the paths to all files that contain Nativewind classes. content: ["./App.tsx", "./components//.{js,jsx,ts,tsx}"],
presets: [require("nativewind/preset")],
theme: {
extend: {},
},
plugins: [],
}

Then create a global.css file in your root or any other directory and paste below code

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

Then next create babel.config.js file in your root directory and paste below code

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

Next Create or modify your metro.config.js and paste below code

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');
 
const config = getDefaultConfig(__dirname)
 
module.exports = withNativeWind(config, { input: './global.css' })

please confirm your global.css path module.exports = withNativeWind(config, { input: ‘./global.css’ }) this import code is for root directory . if you create global.css file any other folder please select your path.

Finally import global.css file in index.tsx or app.tsx file import “./global.css”

import "./global.css"

Please make confirm your import path is right

TypeScript setup

if you use typescript please add below code. first create nativewind-env.d.ts file in your root directory then paste below code

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

Go to tailwind.config.js and paste below code

/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all files that contain Nativewind classes.
  content: ["./App.tsx","./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

Congratulations finally you add nativewind in your react native app. lets add some tailwind css code to check

<View className=" text-blue-500>
      <Text className="text-xl font-bold text-blue-500">
        Welcome to Nativewind!
      </Text>
  </View>

Thanks for your time!