出现错误：“Use process(css).then(cb) to work with async plugins”

screens/HomeScreen.js： 使用 process(css).then(cb) 与异步插件协同工作

这是我的 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>
  )
}

我正在尝试使用 tailwindcss。这是我以下的链接。

我通过将版本更改为3.3.2并使用yarn而不是npm解决了这个错误。

以下是我遵循的命令：

yard add nativewind
yarn add --dev tailwindcss@3.3.2

当我用npm安装tailwindcss时，我也遇到了同样的错误。

我通过将tailwindcss降级为3.3.2解决了这个问题

npm i --dev tailwindcss@3.3.2

在 HomeScreen.js 文件中，使用错误消息中提到的 process(css).then(cb) 模式包装相关代码。以下是如何修改代码的示例：

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);
  });

确保将“./styles.css”替换为包含类名的 Tailwind CSS 文件的正确路径。

通过用 process(css).then(cb) 封装相关代码，可以确保在渲染组件之前异步处理 tailwindcss 插件。

请记住根据您的项目结构和要求调整代码。

我希望这有帮助！如果您还有任何疑问，请告诉我。

这对我有用：

• yarn add postcss@8.4.23

• yarn add --dev tailwindcss@3.3.2

假设你已经安装了nativewind（yard add nativewind）

想要添加以下信息，这可能对使用 firebase 的任何人都有帮助。

即使降级到 "tailwindcss": "3.3.2" 我仍然遇到同样的错误。将 firebase 降级为“firebase”：“9.22.2”解决了此问题。