Fixing "Use process(css).then(cb)" Error in Nativewind
Resolving async plugin compatibility issues with Tailwind CSS in React Native

---

Problem Statement

You're developing a React Native app with Nativewind (Tailwind CSS integration) and encounter the error:
"screens/HomeScreen.js: Use process(css).then(cb) to work with async plugins".

This occurs when using Tailwind CSS classes like className="text-red":

// HomeScreen.js
import { View, Text } from 'react-native';

export default function HomeScreen() {
  return (
    <View>
      <Text className="text-red">HomeScreen</Text> {/* Triggers error */}
    </View>
  )
}

The core issue is version incompatibility between Nativewind and Tailwind CSS, specifically caused by Tailwind CSS post-v3.3.2 introducing breaking changes for async plugin processing.

---

Optimal Solutions

Fix the Tailwind CSS dependency to v3.3.2 – the last compatible version with Nativewind’s plugin system.

Method 1: Clean Reinstall (Recommended)

npm

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

yarn

yarn remove nativewind tailwindcss
yarn add --dev tailwindcss@3.3.2
yarn add nativewind

Method 2: Version Downgrade Only

npm install tailwindcss@3.3.2 --save-dev  // npm
yarn add --dev tailwindcss@3.3.2         // yarn

Verify in package.json

Ensure the version is exactly 3.3.2 (no caret ^):

{
  "devDependencies": {
    // Correct format
    "tailwindcss": "3.3.2" // NOT "^3.3.2"
  }
}

Additional Fixes If Issues Persist

1. Install PostCSS v8.4.23:

   npm install postcss@8.4.23

2. Downgrade Firebase (if used):

   npm install firebase@9.22.2

3. Font filename case sensitivity (rare): Rename font files to match exact casing (e.g., Zenloop-Regular.ttf not ZenLoop-Regular.ttf).

---

Why This Works

• Tailwind CSS v3.3.3+ modified async plugin handling (GitHub Issue #498), breaking Nativewind’s processing pipeline.
• Nativewind requires Tailwind CSS’s synchronous plugin execution model from v3.3.2.
• Pinning the version prevents upgrades to incompatible releases.

---

Preventing Future Issues

Add an npm overrides rule to lock Tailwind’s version globally:

{
  "overrides": {
    "tailwindcss": "3.3.2"
  }
}

---

Recap

1. Uninstall existing Tailwind CSS:
   npm uninstall tailwindcss
2. Install compatible version:
   npm install --save-dev tailwindcss@3.3.2
3. Verify package.json has "tailwindcss": "3.3.2"
4. Restart your development server

After applying these fixes, Nativewind will correctly process classes like text-red without async plugin errors.