Getting Error: "Use process(css).then(cb) to work with async plugins"

Question

screens/HomeScreen.js: Use process(css).then(cb) to work with async plugins

Here is my HomeScreen.js

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

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

I am trying to use tailwindcss in React Native with Nativewind. Here is the link I am following.

Answer 1

I solved this error by changing the version to 3.3.2 and using yarn instead of npm.

Here are the commands I followed:

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

Answer 2

I have also got the same error when I install the tailwindcss with npm.

I have solved this by downgrading the tailwindcss to 3.3.2

npm install [email protected] --save-dev

Answer 3

in package.json change "tailwindcss": "^3.3.2", to "tailwindcss": "3.3.2",

Answer 4

run this guys

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

if using npm use npm instead of yarn <3

Answer 5

09.08.2023 Error

Recently have experienced the same error in Expo SDK 49. Current solution is to change the tailwindcss version to 3.3.2.

Here is how to do it:

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

Answer 6

Remove nativewind

npm uninstall nativewind

Remove tailwindcss

npm uninstall tailwindcss

Add [email protected] as a development dependency

npm install --save-dev [email protected]

Add nativewind

npm install nativewind

Answer 7

For sure the problem was the version of tailwindcss, I was using 3.3.3, and I downgraded to version 3.3.2 and it worked just fine.

npm i --dev [email protected] or yarn add --dev [email protected]

Answer 8

Also with expo you can fix it installing:

npm i tailwindcss": "3.3.2"  
# or 
yarn add tailwindcss": "3.3.2"

Answer 9

I solved this error by changing the version to 3.3.2.

Here are the commands I followed:

npm i --dev [email protected]
# or 
yarn add --dev [email protected]

Answer 10

This worked for me:

• yarn add [email protected]

• yarn add --dev [email protected]

Assuming you've installed nativewind (yard add nativewind)

Answer 11

Wanted to add the following piece of information which may be helpful to anyone using firebase.

Even after downgrading to "tailwindcss": "3.3.2" I still got the same error. Downgrading firebase to "firebase": "9.22.2" resolved this issue.

Answer 12

Downgrade to [email protected] with this command.

npm install [email protected] --save-dev

Then stop and start your server again.

Answer 13

In your HomeScreen.js file, wrap the relevant code using the process(css).then(cb) pattern mentioned in the error message. Here is an example of how you could modify your code:

import { View, Text } from 'react-native';
import React from 'react';
import process from 'tailwindcss/lib';
import styles from './styles.css';

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

// Async plugins processing
process(styles)
  .then(() => {
    // Render your components after tailwindcss plugins have been processed
    ReactDOM.render(<HomeScreen />, document.getElementById('root'));
  })
  .catch((error) => {
    console.error(error);
  });

Make sure you replace './styles.css' with the correct path to your Tailwind CSS file containing the classNames.

By wrapping the relevant code with process(css).then(cb), you ensure that the tailwindcss plugins are processed asynchronously before rendering the components.

Remember to adjust the code as per your project structure and requirements.

I hope this helps! Let me know if you have any further questions.

Answer 14

Downgrade your tailwindCSS version to 3.3.2, remember to remove the ^ from your package.json.

• issues: https://github.com/nativewind/nativewind/issues/498