Expo Tailwind 样式配置助手
为 Expo 应用配置 Tailwind CSS v4、NativeWind v5 与跨平台样式支持。
内容主要指导本地依赖安装和配置，没有凭据窃取、隐蔽外传或破坏性默认行为；但安装命令会引入预览版和 nightly 依赖，未说明数据流、用户确认、回滚或依赖审计，因此扣分。
安装、Metro、PostCSS、CSS 和包装组件路径较完整，但依赖版本包含 preview/nightly，未提供测试或可复现验证；示例中 AnimatedScrollView 的属性映射、ImageProps 的声明顺序等存在潜在实现问题，异常输入和失败诊断也很薄弱，因此仅给静态评估下的低分。
目标场景明确，覆盖 Expo 的 iOS、Android 和 Web Tailwind 设置；但未充分声明 Expo SDK、项目结构、入口导入和兼容性边界，也没有触发条件或非适用范围说明。核心功能不依赖海外在线服务，但依赖包获取可能受网络环境影响，因此扣分。
SKILL.md 有清晰分节、安装步骤、配置样例、使用示例和故障排查，具备版本与 MIT 元数据；README 提供安装、更新、来源和项目级维护背景，但技能本身缺少变更记录、兼容矩阵、维护责任和更完整的限制说明，因此扣分。
内容能覆盖 Tailwind v4、NativeWind v5、react-native-css 及包装器的核心配置，具有直接参考价值；但未有执行证据，依赖预览版本，示例潜在缺陷且缺少入口导入、验证命令和升级替代方案，用户仍可能需要较多修订，因此低于静态上限。
文件包含具体命令、配置和代码，部分主张可审计；但没有提交的测试套件、CI 覆盖或第三方执行结果，关键路径无法从静态材料独立复现，因此只给有限分。
- 安装命令使用 NativeWind preview 和 react-native-css nightly 版本，先确认与当前 Expo SDK、React Native 和包管理器兼容。
- 将示例代码视为起点并进行 TypeScript 编译、Metro 启动和 iOS/Android/Web 实测；特别检查 AnimatedScrollView 属性映射、Image 包装器类型以及 global.css 的入口导入。
- 依赖安装会产生外部包下载和锁文件变更；应用前应确认用户同意，并保留现有配置和锁文件以便回滚。
这个 Skill 能做什么，适合哪些场景？
该技能面向 Expo 项目，指导使用 Tailwind CSS v4、react-native-css 和 NativeWind v5 建立适用于 iOS、Android 与 Web 的统一样式方案。它涵盖依赖安装、Metro 与 PostCSS 配置、全局 CSS、主题变量、平台专属样式和 Apple 语义颜色。技能还提供 CSS 包装组件、图片与动画组件示例，以及常见样式、平台颜色和 TypeScript 问题的排查方法。它适合希望采用 Tailwind CSS v4 新配置方式的 Expo 开发者。
指导用户运行依赖安装命令，设置 lightningcss 版本解析；创建或修改 metro.config.js、postcss.config.mjs 和 src/global.css；移除不再需要的 NativeWind Babel 配置；编写使用 useCssElement 的 View、Text、ScrollView、Pressable、TextInput、Image、Link 和动画包装组件；配置自定义主题变量、平台媒体查询与 Apple 系统颜色；并提供样式不生效、平台颜色和 TypeScript 类型错误的排查步骤。
- 正在创建 Expo 应用、希望用 Tailwind CSS v4 编写 iOS、Android 和 Web 共享界面的开发者。
- 从 NativeWind v4 或 Tailwind CSS v3 迁移到 Tailwind CSS v4 配置方式的 Expo 团队。
- 需要在 React Native 组件上使用 className，并愿意维护 CSS 包装组件的开发者。
- 需要通过 CSS 变量处理 iOS 原生语义颜色、深浅色模式和平台字体的 Expo 项目。
- 遇到 Metro、CSS 导入、平台颜色或 className 类型问题，需要按配置文件逐项排查的开发者。
这个 Skill 有哪些优点和局限？
- 覆盖从依赖安装到组件包装和故障排查的完整配置路径。
- 面向 iOS、Android 和 Web 的统一样式场景。
- 明确说明 Tailwind CSS v4 与 NativeWind v5 不需要 NativeWind Babel 配置。
- 提供平台字体、Apple 语义颜色和 CSS 变量的具体示例。
- 仓库采用 MIT 许可证，README 标明由 Expo 团队维护。
- 依赖 NativeWind v5 预览版和 react-native-css nightly 版本，稳定性风险未在材料中评估。
- 示例需要创建和维护多组自定义 CSS 包装组件，集成成本高于简单配置。
- 材料未提供测试套件、测试结果或已验证的平台兼容矩阵。
- 未说明版本升级策略、已知限制或失败后的回滚方案。
- 该技能只覆盖 Tailwind 样式配置，不涵盖 Expo 应用构建、发布或 EAS 工作流。
如何安装这个 Skill？
在 Expo 项目根目录运行：
npx expo install tailwindcss@^4 [email protected] [email protected] @tailwindcss/postcss tailwind-merge clsx
然后在 package.json 中加入 lightningcss 的 resolutions：
{
"resolutions": {
"lightningcss": "1.30.1"
}
}
将本技能目录放入所使用 Agent Skills 客户端的技能目录。README 说明该仓库的整套技能可通过 npx skills@latest add expo/skills --skill '*' 安装，但未提供只安装 expo-tailwind-setup 的命令。
如何使用这个 Skill？
让代理执行或指导以下任务，例如：“在这个 Expo 项目中配置 Tailwind CSS v4、react-native-css 和 NativeWind v5，并创建 CSS 包装组件。”随后根据技能内容配置 Metro、PostCSS 和全局 CSS，导入 CSS 包装组件，并使用 className 编写界面。技能没有说明特定客户端的调用语法或自动执行行为。
这个 Skill 与同类方案有什么区别？
相较于 NativeWind v4 或 Tailwind CSS v3，该方案采用 CSS-first 配置：使用 @tailwindcss/postcss、CSS @import 和 @theme，不使用 tailwind.config.js；同时通过 useCssElement 包装组件，并在 Metro 中使用 withNativewind 的新选项。