在 Expo 中快速配置 Tailwind CSS v4 与 NativeWind v5

解决 Expo 应用中样式碎片化问题：通过集成 Tailwind CSS v4、NativeWind v5 和 react-native-css，实现一套 CSS-First 的通用样式方案，无需 Babel 配置即可在全平台运行。

为什么需要这个技能

在 React Native 开发中，传统的样式编写方式（StyleSheet）缺乏灵活性，而早期的 Tailwind 集成方案往往依赖复杂的 Babel 插件，且在 Web 和原生端之间存在表现差异。

随着 Tailwind CSS v4 的发布，样式配置转向了 "CSS-First"。通过本技能，你可以利用最新的 PostCSS 插件和运行时，直接在 CSS 文件中定义主题和平台特定样式（如 iOS 语义化颜色），并通过 useCssElement 封装组件，极大提升 UI 开发速度。

适用场景

• 需要在 Expo 项目中快速构建响应式、跨平台 UI 的场景。
• 希望统一 iOS、Android 和 Web 端的样式定义，避免重复编写样式代码。
• 需要在原生端使用复杂的 CSS 变量或平台特定颜色（如 Apple 系统颜色）时。

核心工作流

1. 环境安装与依赖配置

首先安装核心依赖，并由于 lightningcss 的兼容性要求，需在 package.json 中锁定版本：

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"
  }
}

2. 配置文件构建

• Metro 配置：使用 withNativewind 包装配置，并关闭 inlineVariables 以支持平台颜色。
• PostCSS 配置：创建 postcss.config.mjs 引入 @tailwindcss/postcss。
• 全局 CSS：在 src/global.css 中使用 @import 引入 Tailwind v4 基础指令，并定义 @media ios 或 @media android 的平台特定变量。

3. 封装 CSS 组件

由于 react-native-css 需要显式包装才能支持 className，需要创建一套增强组件库（如 src/tw/index.tsx）：

import { useCssElement } from "react-native-css";
import { View as RNView } from "react-native";

export const View = (props: React.ComponentProps<typeof RNView> & { className?: string }) => {
  return useCssElement(RNView, props, { className: "style" });
};

4. 使用与自定义主题

在业务组件中直接导入封装后的组件，通过 className 编写样式。如需自定义主题，直接在 global.css 的 @theme 块中定义 CSS 变量，无需修改 tailwind.config.js。

下载和安装

下载 expo-tailwind-setup 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐