使用NativeWind配置Tailwind CSS遇.plugins无效属性错误求助

运行npx expo start -c时触发错误：

error: .plugins is not a valid Plugin property when setting up Tailwind CSS with 
React Native and NativeWind

具体报错详情：

error: node_modules/expo-router/entry.js: [BABEL] ............/node_modules/expo-router/entry.js: .plugins is not a valid Plugin property

已尝试的操作 #

• 安装nativewind和tailwindcss依赖
• 按照NativeWind官方文档配置babel.config.js和tailwind.config.js
• 回滚Tailwind CSS版本
• 调整Babel配置项
• 清除缓存、重新安装node_modules

相关配置文件 #

babel.config.js #

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

tailwind.config.js #

module.exports = {
  content: [
    './app/**/*.{js,jsx,ts,tsx}',
    './client/screens/**/*.{js,jsx,ts,tsx}',
    './client/components/**/*.{js,jsx,ts,tsx}',
  ],
  presets: [require('nativewind')],
  theme: {
    extend: {},
  },
  plugins: [],
};

package.json依赖片段 #

"dependencies": {
  "@react-navigation/drawer": "^6.7.2",
  "axios": "^1.7.7",
  "cheerio": "^1.0.0",
  "dotenv": "^16.4.5",
  "expo": "~51.0.28",
  "expo-constants": "^16.0.2",
  "expo-linking": "^6.3.1",
  "expo-location": "^17.0.1",
  "expo-router": "^3.5.23",
  "expo-status-bar": "^1.12.1",
  "fs": "^0.0.1-security",
  "install": "^0.13.0",
  "moment": "^2.30.1",
  "mongoose": "^8.7.2",
  "mysql": "^2.18.1",
  "nativewind": "^4.1.20",
  "react": "18.2.0",
  "react-native": "0.74.5",
  "react-native-gesture-handler": "^2.20.0",
  "react-native-reanimated": "~3.10.1",
  "react-native-safe-area-context": "^4.11.1",
  "react-native-screens": "^3.34.0",
  "tailwindcss": "3"
},
"devDependencies": {
  "@babel/core": "^7.25.9",
  "@babel/runtime": "^7.25.9"
},
"resolutions": {
  "react-native-reanimated": "3.10.1"
},

app.d.ts #

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

补充环境信息 #

• 使用Expo SDK版本：~51.0.28
• 已确认react-native-reanimated的Babel插件在plugins数组末尾，配置符合要求

错误原因及修复方案 #

原因 #

NativeWind v4版本的配置逻辑发生了变化，不再允许在tailwind.config.js中直接使用plugins字段（该字段属于Tailwind CSS原生配置，但NativeWind v4的预设会覆盖相关逻辑，导致Babel解析冲突）。同时，tailwindcss版本指定为3，可能拉取了不兼容的3.x新版本，进一步加剧了配置冲突。

修复步骤 #

1. 修改tailwind.config.js，移除plugins字段
   编辑tailwind.config.js，删除plugins: []这一行，修改后的配置如下：

   module.exports = {
     content: [
       './app/**/*.{js,jsx,ts,tsx}',
       './client/screens/**/*.{js,jsx,ts,tsx}',
       './client/components/**/*.{js,jsx,ts,tsx}',
     ],
     presets: [require('nativewind')],
     theme: {
       extend: {},
     },
   };
   

2. 锁定兼容的Tailwind CSS版本
   NativeWind v4要求Tailwind CSS版本在3.3.0到3.4.x之间，将package.json中的tailwindcss依赖改为具体兼容版本：

   "tailwindcss": "^3.4.10"
   

3. 重新安装依赖并清除缓存
   执行以下命令：

   rm -rf node_modules package-lock.json yarn.lock
   npm install
   npx expo start -c
   

内容的提问来源于stack exchange，提问作者Yaroslav