Fixing 'Use process(css).then(cb) to work with async plugins' Error

Introduction

If you've encountered the error message:

Use process(css).then(cb) to work with async plugins

while using TailwindCSS with React Native and Nativewind, don't worry—you’re not alone. This issue often arises due to compatibility problems with TailwindCSS and PostCSS versions. In this guide, we'll walk you through the steps to resolve it.

The Problem

You may encounter this error when trying to use TailwindCSS in your React Native project with Nativewind. Here's an example:

import { View, Text } from 'react-native'
import React from 'react'

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

When running the app, the error surfaces due to recent changes in PostCSS or TailwindCSS versions, specifically starting from TailwindCSS v3.3.3.

The Solution

To fix this issue, follow these steps:

Step 1: Downgrade TailwindCSS

The error occurs because TailwindCSS v3.3.3+ introduced asynchronous plugins that require specific updates to dependencies. Downgrading TailwindCSS to v3.3.2 resolves the issue for most users.

Using Yarn

Run the following commands:

yarn remove tailwindcss nativewind
yarn add [email protected]
yarn add --dev [email protected]
yarn add nativewind

Using npm

If you're using npm instead of yarn, execute:

npm uninstall tailwindcss nativewind
npm install [email protected]
npm install --save-dev [email protected]
npm install nativewind

Step 2: Update package.json

Ensure your package.json reflects the correct TailwindCSS version. Locate the tailwindcss entry and change it to:

"tailwindcss": "3.3.2"

Remove any caret (^) symbol to prevent automatic updates to incompatible versions.

Step 3: Restart Your Project

After updating dependencies, stop the development server and restart it:

npm start # or yarn start

This will ensure the changes take effect.

FAQ

Q1: Why does this error occur?

The error occurs due to the introduction of asynchronous plugins in TailwindCSS starting from v3.3.3, which require compatible updates in tools like Nativewind and PostCSS.

Q2: Can I fix this without downgrading?

As of now, downgrading is the quickest and most reliable solution. Future updates to Nativewind and related tools may offer better compatibility.

Q3: Is downgrading safe?

Yes, downgrading to TailwindCSS v3.3.2 is safe and widely recommended by the community for resolving this specific issue.

Q4: I still have the error after downgrading. What should I do?

Ensure that:

• All related dependencies (e.g., Nativewind, PostCSS) are compatible.
• You've removed the caret (^) in your package.json.
• You've restarted your development server.

Additional Tips

• Stay Updated: Check for updates in the Nativewind GitHub Issues and TailwindCSS GitHub Issues.
• Alternative Solution: If you rely heavily on the latest TailwindCSS features, consider monitoring the release notes of Nativewind for compatibility announcements.