styling-nativewind-v4-expo

SKILL.md

Accept className, merge defaults, and optionally use a class-variance helper.

Use remapProps (multiple style props) or cssInterop (map a class prop to a style prop).

On Expo Router, do not add your own SafeAreaProvider (Router already does). Use p-safe, pt-safe, etc.

在 Expo React Native 應用程式（包括 Expo Router）中設定和使用 NativeWind v4 (Tailwind CSS v3)。設定 tailwind.config.js、global.css、babel.config.js (jsxImportSource + nativewind/babel)、metro.config.js (withNativeWind + input) 和 app.json (web 捆綁器 Metro)。解決「className not apply」、Tailwind CLI 編譯和 Metro 快取問題。透過 CSS 變數 (vars/useColorScheme) 和第三方元件樣式 (remapProps/cssInterop) 實作可重複使用元件/變體、深色模式 + 主題。使用 NativeWind v4、Tailwind 樣式的 className 公用程式處理 Expo 專案時或偵錯 NativeWind 配置時使用。 來源：tristanmanchester/agent-skills。

查看原文