How to solve plugins error in React Native project for the use of Tailwind? [closed]

Question

I have babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'nativewind/babel',
      'react-native-worklets/plugin',
      '@babel/plugin-transform-export-namespace-from',
    ],
  };
};

I want to use tailwind in RN. But the error occurs like: index.js: [BABEL] D:\Parish-App\index.js: .plugins is not a valid Plugin property

I tried tailwind-rn library but the tailwind is not loading in the preview.

Answer 1

This isn't a TailwindCSS question directly, but rather a Nativewind one. It's important to know that Nativewind is not yet compatible with TailwindCSS v4 (latest since January 2025), so if you run npm install tailwindcss you'll run into compatibility issues - instead, you need to install v3 specifically.

npm install --dev tailwindcss@^3.4.17

For Nativewind & Babel (Step #1)

Solution #1 - Without extra Framework

• Installation with Framework-less React Native - Nativewind Docs

Install the following dependencies:

npm install nativewind react-native-reanimated [email protected]
npm install --dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11
npx pod-install

Then finalize the installation by modifying the following files:

babel.config.js

module.exports = {
  presets: [
    // ... (other existing presets)
    // and:
    'nativewind/babel'
  ],
};

metro.config.js

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const { withNativeWind } = require("nativewind/metro");
 
const config = mergeConfig(getDefaultConfig(__dirname), {
  /* your config */
});
 
module.exports = withNativeWind(config, { input: "./global.css" });

Solution #2 - Expo (recommended - create new project with Nativewind)

If you'd like to skip manual setup and use Nativewind with Expo, you can use the following command to initialize a new Expo project with Nativewind and Tailwind CSS.

npx rn-new@latest --nativewind

Or manually, with the following dependencies and file modifications, you can get started:

• Install Nativewind with TailwindCSS v3 by Expo - Nativewind Docs

npm install nativewind react-native-reanimated@~3.17.4 [email protected]
npm install --dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11

babel.config.js

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

metro.config.js

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

app.json

{
  "expo": {
    "web": {
      "bundler": "metro"
    }
  }
}

For TailwindCSS & App (Step #2)

Whichever solution you chose, these are necessary for successfully setting up TailwindCSS:

tailwind.config.js

/** @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: [],
}

global.css

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

App.js

import "./global.css"
import { Text, View } from "react-native";
 
export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-xl font-bold text-blue-500">
        Welcome to Nativewind!
      </Text>
    </View>
  );
}

nativewind-env.d.ts (optional)

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