Expo Tailwind 样式配置助手

这个 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 类型错误的排查步骤。

如何安装这个 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 的命令。

tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/expo/skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/plugins/expo/skills/expo-tailwind-setup" ~/.claude/skills/
rm -rf "$tmp"

如何使用这个 Skill？

让代理执行或指导以下任务，例如：“在这个 Expo 项目中配置 Tailwind CSS v4、react-native-css 和 NativeWind v5，并创建 CSS 包装组件。”随后根据技能内容配置 Metro、PostCSS 和全局 CSS，导入 CSS 包装组件，并使用 className 编写界面。技能没有说明特定客户端的调用语法或自动执行行为。

这个 Skill 有哪些优点和局限？

这个 Skill 与同类方案有什么区别？

与相关 Skills 并排比较；分数均按同一 FSRS 标准得出。

常见问题