SuperAPI AI 工具集

expo-tailwind-setup-v55

前端与建站

查看项目

更新于 10-16 09:51

技能介绍

用途:在 Expo 项目中搭建 Tailwind CSS v4 通用样式方案,覆盖 iOS、Android 和 Web,技术组合为 Tailwind CSS v4、react-native-css(React Native 的 CSS 运行时)、NativeWind v5(Metro 转换器)与 @tailwindcss/postcss。

主要能力:使用 CSS-first 配置,用 @theme 定义主题变量,支持平台媒体查询(@media ios、@media android)与 CSS 变量,可通过 useCssVariable 在 JS 中读取变量,支持 Apple 系统语义色与 platformColor。

使用方式:先安装依赖: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 兼容在 package.json 添加 overrides 指定 1.30.1。创建 metro.config.js,用 withNativewind 包裹默认配置,设 inlineVariables: false、globalClassNamePolyfill: false;创建 postcss.config.mjs 引入 @tailwindcss/postcss;创建 src/global.css,写入 @import "tailwindcss"。不再需要 NativeWind 的 babel.config.js 预设。由于 react-native-css 需要显式包裹 CSS 元素,需在 src/tw 目录创建 View、Text、ScrollView、Pressable、TextInput、Image、Animated 等包装组件,通过 useCssElement 将 className 映射到 style,随后从 @/tw 导入使用。

适用场景:需要跨平台统一样式、以 Tailwind 类名编写 React Native 界面并复用 Web 样式的 Expo 应用。

限制:相关依赖为预发布或夜间版本,可能不稳定,使用前应检查是否有更新的稳定版本;未提供其他平台或更早版本兼容说明;使用 platformColor 需在 @media ios 中;Web/Android 需用 :root 与 .dark 显式覆盖,react-native-css 不支持 light-dark()。typescript 类型需为组件补充 className 属性。