用途
expo-tailwind-setup 是一份配置指南，用于在 Expo 项目中搭建 Tailwind CSS v4，借助 react-native-css 和 NativeWind v5 实现 iOS、Android 与 Web 的通用样式。它面向需要在 React Native / Expo 应用中使用类似 Tailwind 工具类写法的开发者。
主要组成
该方案使用以下技术：
- Tailwind CSS v4：CSS-first 的现代配置方式
- react-native-css：React Native 的 CSS 运行时
- NativeWind v5：React Native 中 Tailwind 的 Metro 转换器
- @tailwindcss/postcss：Tailwind v4 的 PostCSS 插件
安装方式
指南给出的安装命令为：
npx expo install tailwindcss@^4 nativewind@5.0.0-preview.2 react-native-css@0.0.0-nightly.5ce6396 @tailwindcss/postcss tailwind-merge clsx
并为 lightningcss 兼容性添加 resolutions：
{
"resolutions": {
"lightningcss": "1.30.1"
}
}
文中说明：Expo 中不需要 autoprefixer，因为使用了 lightningcss；postcss 已由 expo 默认包含。
配置文件
Metro 配置（metro.config.js）使用 withNativewind 包装默认配置，并设置 inlineVariables: false 与 globalClassNamePolyfill: false。PostCSS 配置（postcss.config.mjs）仅启用 @tailwindcss/postcss 插件。全局 CSS（src/global.css）通过 @import "tailwindcss/theme.css"、@import "tailwindcss/preflight.css"、@import "tailwindcss/utilities.css" 引入，并包含 Android 与 iOS 的平台字体变量。
指南特别说明：使用 Tailwind v4 与 NativeWind v5 时不需要 babel.config.js，应移除仅包含 NativeWind 配置的 babel 预设。
组件包装
由于 react-native-css 需要显式的 CSS 元素包装，指南提供了可复用组件的示例代码，放在 src/tw/index.tsx，包括 Link、View、Text、ScrollView、Pressable、TextInput、AnimatedScrollView、TouchableHighlight 等，均通过 useCssElement 将 className 映射到 style。图像组件位于 src/tw/image.tsx，动画组件位于 src/tw/animated.tsx。使用方式为从 @/tw 导入这些组件并直接书写 className。
主题与平台样式
可在 global.css 中通过 @theme 定义自定义主题变量（字体、行高等）。平台专属样式通过 @media ios 与 @media android 的媒体查询设置 root 变量。指南还给出 Apple 系统颜色 CSS 变量文件示例（src/css/sf.css），在 iOS 上使用 platformColor()，其他平台使用 light-dark() 回退，并注册为 Tailwind 主题颜色（如 text-sf-text、bg-sf-bg）。在 JavaScript 中可通过 useCSSVariable 读取 CSS 变量。
与旧版本的差异
文中列出与 NativeWind v4 / Tailwind v3 的关键差异：不再需要 babel.config.js；使用 @tailwindcss/postcss 替代 tailwindcss 插件；使用 @import "tailwindcss/..." 替代 @tailwind 指令；使用 CSS 中的 @theme 替代 tailwind.config.js；组件需用 useCssElement 包装以支持 className；Metro 配置使用带不同选项的 withNativewind。
限制与排查
该配置依赖预览版与 nightly 版本（NativeWind v5 预览版、react-native-css nightly）。常见问题方面：样式不生效时需检查 CSS 文件是否在应用入口导入、组件是否用 useCssElement 包装、Metro 配置是否应用 withNativewind；平台颜色不工作时在 @media ios 中使用 platformColor()，Web/Android 使用 light-dark() 回退；TypeScript 报错时需为组件 props 添加 className。除上述内容外，其他功能、收费与使用限制暂未提供。