当安装新的 React Native 51 SDK 并希望使用 Tailwind 编写代码时，我不会浪费您的时间，让我们从以下开始：
先看文件夹结构！
在您的文件结构中，我们需要添加一些文件才能使其正常工作，在“应用程序”内创建一个 global.css 文件，然后添加：
步骤1
global.css
步骤 2
index.tsx
那么现在您向前迈出了一步，现在将为“/app/(tabs)/index.tsx”添加一个简单的代码。
现在添加此代码后，您将遇到className错误，这里您需要添加一个文件nativewind-env.d.ts
注意：NativeWind 通过声明合并扩展了 React Native 类型。包含类型的最简单方法是创建一个新的 nativewind-env.d.ts 文件并添加引用类型的三斜杠指令。
文件内：
///
那么现在这个错误应该已经修复了！
步骤3
在“/app/_layout.tsx”中，您必须确保有以下代码：
`从“expo-router”导入 { Slot };
// 导入全局 CSS 文件
导入“../app/global.css”；
导出默认槽位；`
步骤 4
那么现在你必须更新你的 tailwind.config.js
/**@type {import('tailwindcss').Config}*/
module.exports = {
// 注意：更新此内容以包含所有组件文件的路径。
内容: ["./app/**/*.{js,jsx,ts,tsx}"],
预设：[require("nativewind/preset")],
主题：{
扩展：{},
},
插件：[],
};
复制！代码并替换您拥有的代码。
步骤 5
在这里，我们将添加“Nativewind”中最重要的部分以与 React Native/Expo 配合使用：我们的“babel.config.js”
module.exports = 函数 (api) {
api.cache(true);
返回{
预设：[
["babel-preset-expo", { jsxImportSource: "nativewind" }],
“nativewind/babel”，
],
};
};
确保您有此代码。
步骤 6
使 Tailwind 工作的最后一部分是“metro.config.js”，如果您没有此文件，请创建它，然后添加以下代码：
`const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");
const config = getDefaultConfig(__dirname);
module.exports = withNativeWind(config, { input: "./app/global.css" });`
完结
快乐编码
以上是使用 NativeWind 在 React Native SDK 中设置 Tailwind的详细内容。更多信息请关注PHP中文网其他相关文章！
