SuperAPI AI 工具集

expo-tailwind-setup

前端与建站

查看项目

更新于 10-16 07:28

技能介绍

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

主要能力:CSS-first 配置;通过 className 在 React Native 组件上使用 Tailwind 工具类;支持平台媒体查询(@media ios / @media android)与 Apple 系统语义色(platformColor);可用 @theme 自定义主题变量,并通过 useCSSVariable 在 JavaScript 中读取 CSS 变量。

使用方式:安装依赖命令为 npx expo install tailwindcss@^4 nativewind@5.0.0-preview.2 react-native-css@0.0.0-nightly.5ce6396 @tailwindcss/postcss tailwind-merge clsx;在 package.json 添加 resolutions 固定 lightningcss 为 1.30.1。创建 metro.config.js 并使用 withNativewind(inlineVariables: false、globalClassNamePolyfill: false);创建 postcss.config.mjs 引入 @tailwindcss/postcss;创建 src/global.css 导入 tailwindcss 的 theme、preflight、utilities。无需 babel.config.js,应移除 NativeWind 相关 babel 预设。由于 react-native-css 需要显式包装,需在 src/tw 下用 useCssElement 封装 View、Text、ScrollView、Pressable、TextInput、Image、Link 等组件,再从该目录导入使用。

适用场景:需要跨端统一样式的 Expo 应用,尤其是希望用 Tailwind 工具类替代 StyleSheet 的项目。

限制:依赖预览版与 nightly 版本,稳定性需自行评估;必须手动包装组件才能支持 className;平台颜色需在 @media ios 中使用 platformColor,Web/Android 回退到 light-dark();资料未提供收费、价格与效果保证等信息。