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。

查看原文