expo-tailwind-setup · Expo 官方 Tailwind CSS 配置技能

技能简介

expo-tailwind-setup 是由 Expo 官方团队（Expo / 2509 Group）发布的 SKILL.md 格式技能，专注于在 Expo 项目中为 iOS、Android、Web 多端目标搭建 Tailwind CSS v4 + NativeWind v5 + react-native-css 的统一样式栈。技能内容覆盖从零搭建、迁移旧配置、共享组件封装到平台差异调优的完整路径，是 Expo 团队跨端样式一致性的官方参考实现。版本号 v1.0.0（2026-07-05），当前在 Skillstore 的内容修订为 r1，质量评分 80（Silver 级别），SKILL.md 主文件 481 行，已通过 Skillstore 安全审计标记为 Safe（无提示注入、凭据访问、数据外泄或恶意意图证据）。

核心能力

• 多端样式栈整合：围绕 Tailwind CSS v4 的 CSS-first 配置模型，把 NativeWind v5 与 react-native-css 接入同一 Metro 流程，免去 v3 时代 Babel preset 的复杂性。
• 新项目一键规划：覆盖包安装、Metro 配置、PostCSS 配置、全局 CSS 引入、共享 className 组件封装 5 步默认顺序，让 Agent 可直接生成可执行步骤清单。
• 样式迁移诊断：针对从旧版 NativeWind 升级后样式失效的常见问题，提供 CSS 引入、Metro 集成、组件包装、TypeScript className 类型推导的检查表。
• 平台语义色映射：通过 CSS 变量、平台 media query、theme layer 注册把 iOS 语义色转换为 Tailwind 工具类，跨端保持色板一致。
• CSS-enabled 组件库封装：指导构建可被原生组件复用的 className 包装层，避免在屏幕层重复硬编码样式。

安装配置

• 支持 Agent：Claude、Codex、Claude Code（CC），三套工作流通用 SKILL.md 入口。
• 依赖要求：Expo SDK 当前稳定版 + Tailwind CSS v4 + NativeWind v5 预览版 + react-native-css 编译器；安装前需验证 NativeWind v5 在目标 Expo 版本下的兼容性。
• 配置前置：Metro 配置、PostCSS 配置、全局 CSS 入口三者需先就绪，再添加 className 组件包装层。
• 目录约定：建议把 CSS-enabled 包装组件统一放在 components/styled/（或团队约定的共享目录）下，保证 import 一致性。
• 环境变量：2 项环境变量被 SKILL.md 引用，主要用于 EAS 构建与 CI 标记，可在测试阶段留空。
• 网络访问：1 处网络访问点（拉取 Expo 模板与样式参考），离线环境下需预下载模板。

使用步骤

1. 在 Claude / Codex / Claude Code 中加载技能 expo-tailwind-setup，让 Agent 读取 SKILL.md 中的多端样式栈默认流程。
2. 让 Agent 按"包安装 → Metro 配置 → PostCSS 配置 → 全局 CSS 引入 → className 包装组件"5 步顺序生成新 Expo 项目改造计划。
3. 若是旧 NativeWind 项目迁移，先删除 Babel preset 与 v3 配置文件，让 Agent 输出 v4 的 CSS-first 迁移检查表，逐项核对。
4. 调用平台的 iOS/Android/Web 三个目标分别跑一遍，确认 media query 与 className 在不同环境下解析一致。
5. 把共享 className 组件提交进版本控制，作为后续团队复用基础；后续样式变更走 Tailwind v4 的 @theme 层扩展。

适用场景

• Expo 新项目初始化：需要在 iOS、Android、Web 三端共享 Tailwind 工具类的团队，从零搭建样式系统。
• 样式系统迁移：从 Tailwind v3 / 旧 NativeWind 升级到 v4 + NativeWind v5 的中型项目，统一 CSS-first 配置。
• 设计系统落地：要把 design tokens（色板、字号、间距）抽到 Tailwind theme layer，供业务组件统一消费的设计系统团队。
• 跨端样式一致性回归：QA 需要在多端验证样式差异时，借助平台的 media query 与 className 包装组件做基线对比。

适用人群

• Expo 跨端项目的技术负责人与架构师
• 移动端 / Web 全栈工程师与设计系统维护者
• 使用 Claude / Codex / Claude Code 编写代码的 AI 辅助开发工程师
• 设计转工程（DesignOps）团队的样式 token 管理者

工作原理

技能本质是一份结构化的 SKILL.md 提示工程文件，向 Agent 提供"按既定顺序操作 + 配套最佳实践与禁忌"的指令模板。它把"如何在 Expo 项目里集成 Tailwind v4 + NativeWind v5"这件原本散落在文档、博客、issue 里的知识，整理为可被 Agent 复用的工作流。技能本身不执行任何副作用文件改动，所有配置由 Agent 依据 SKILL.md 给出指令后由人或编辑器落地——这意味着它既能用于新项目冷启动，也能作为既有项目的诊断检查表。

官方链接

• 技能主页：https://skillstore.io/skills/expo-expo-tailwind-setup
• 安全审计报告（v5）：https://skillstore.io/skills/expo-expo-tailwind-setup/audits/5
• Expo 官方：https://expo.dev/
• Skillstore 安全徽章：https://skillstore.io/badges/skills/expo-expo-tailwind-setup/security.svg

出品方与版本

• 作者：Expo（expo）官方团队
• 版本：v1.0.0（内容修订 r1）
• 首发日期：2026-07-05
• License：MIT
• Ref：30c73eac2afe762f6aa9c4553158769369d47351