當安裝新的 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中文網其他相關文章！
