🚀 快速安装

复制以下命令并运行，立即安装此 Skill：

npx @anthropic-ai/skills install expo/skills/expo-tailwind-setup

💡 提示：需要 Node.js 和 NPM

使用 react-native-css 在 Expo 中设置 Tailwind CSS

本指南介绍了如何在 Expo 中使用 react-native-css 和 NativeWind v5 设置 Tailwind CSS v4，以实现跨 iOS、Android 和 Web 的统一样式。

概述

此设置使用：

Tailwind CSS v4 – 现代化的 CSS 优先配置
react-native-css – React Native 的 CSS 运行时
NativeWind v5 – 用于 React Native 中 Tailwind 的 Metro 转换器
@tailwindcss/postcss – Tailwind v4 的 PostCSS 插件

安装

# 安装依赖
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 的兼容性 resolutions 配置：

// package.json
{
  "resolutions": {
    "lightningcss": "1.30.1"
  }
}

在 Expo 中不需要 autoprefixer，因为使用了 lightningcss
postcss 默认已包含在 expo 中

配置文件

Metro 配置

创建或更新 metro.config.js：

// metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const { withNativewind } = require("nativewind/metro");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

module.exports = withNativewind(config, {
  // 内联变量会破坏 CSS 变量中的 PlatformColor
  inlineVariables: false,
  // 我们手动添加 className 支持
  globalClassNamePolyfill: false,
});

PostCSS 配置

创建 postcss.config.mjs：

// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

全局 CSS

创建 src/global.css：

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

/* 特定平台的字体族 */
@media android {
  :root {
    --font-mono: monospace;
    --font-rounded: normal;
    --font-serif: serif;
    --font-sans: normal;
  }
}

@media ios {
  :root {
    --font-mono: ui-monospace;
    --font-serif: ui-serif;
    --font-sans: system-ui;
    --font-rounded: ui-rounded;
  }
}

重要提示：无需 Babel 配置

使用 Tailwind v4 和 NativeWind v5，你不需要为 Tailwind 配置 babel.config.js。如果存在任何 NativeWind 的 babel 预设，请移除：

// 如果 babel.config.js 只包含 NativeWind 配置，请删除该文件
// 以下配置 不再需要：
// module.exports = function (api) {
//   api.cache(true);
//   return {
//     presets: [
//       ["babel-preset-expo", { jsxImportSource: "nativewind" }],
//       "nativewind/babel",
//     ],
//   };
// };

CSS 组件封装器

由于 react-native-css 需要显式的 CSS 元素封装，请创建可复用的组件：

主要组件 (`src/tw/index.tsx`)

import {
  useCssElement,
  useNativeVariable as useFunctionalVariable,
} from "react-native-css";

import { Link as RouterLink } from "expo-router";
import Animated from "react-native-reanimated";
import React from "react";
import {
  View as RNView,
  Text as RNText,
  Pressable as RNPressable,
  ScrollView as RNScrollView,
  TouchableHighlight as RNTouchableHighlight,
  TextInput as RNTextInput,
  StyleSheet,
} from "react-native";

// 支持 CSS 的 Link
export const Link = (
  props: React.ComponentProps<typeof RouterLink> & { className?: string }
) => {
  return useCssElement(RouterLink, props, { className: "style" });
};

Link.Trigger = RouterLink.Trigger;
Link.Menu = RouterLink.Menu;
Link.MenuAction = RouterLink.MenuAction;
Link.Preview = RouterLink.Preview;

// CSS 变量钩子
export const useCSSVariable =
  process.env.EXPO_OS !== "web"
    ? useFunctionalVariable
    : (variable: string) => `var(${variable})`;

// View
export type ViewProps = React.ComponentProps<typeof RNView> & {
  className?: string;
};

export const View = (props: ViewProps) => {
  return useCssElement(RNView, props, { className: "style" });
};
View.displayName = "CSS(View)";

// Text
export const Text = (
  props: React.ComponentProps<typeof RNText> & { className?: string }
) => {
  return useCssElement(RNText, props, { className: "style" });
};
Text.displayName = "CSS(Text)";

// ScrollView
export const ScrollView = (
  props: React.ComponentProps<typeof RNScrollView> & {
    className?: string;
    contentContainerClassName?: string;
  }
) => {
  return useCssElement(RNScrollView, props, {
    className: "style",
    contentContainerClassName: "contentContainerStyle",
  });
};
ScrollView.displayName = "CSS(ScrollView)";

// Pressable
export const Pressable = (
  props: React.ComponentProps<typeof RNPressable> & { className?: string }
) => {
  return useCssElement(RNPressable, props, { className: "style" });
};
Pressable.displayName = "CSS(Pressable)";

// TextInput
export const TextInput = (
  props: React.ComponentProps<typeof RNTextInput> & { className?: string }
) => {
  return useCssElement(RNTextInput, props, { className: "style" });
};
TextInput.displayName = "CSS(TextInput)";

// AnimatedScrollView
export const AnimatedScrollView = (
  props: React.ComponentProps<typeof Animated.ScrollView> & {
    className?: string;
    contentClassName?: string;
    contentContainerClassName?: string;
  }
) => {
  return useCssElement(Animated.ScrollView, props, {
    className: "style",
    contentClassName: "contentContainerStyle",
    contentContainerClassName: "contentContainerStyle",
  });
};

// TouchableHighlight 与 underlayColor 提取
function XXTouchableHighlight(
  props: React.ComponentProps<typeof RNTouchableHighlight>
) {
  const { underlayColor, ...style } = StyleSheet.flatten(props.style) || {};
  return (
    <RNTouchableHighlight
      underlayColor={underlayColor}
      {...props}
      style={style}
    />
  );
}

export const TouchableHighlight = (
  props: React.ComponentProps<typeof RNTouchableHighlight>
) => {
  return useCssElement(XXTouchableHighlight, props, { className: "style" });
};
TouchableHighlight.displayName = "CSS(TouchableHighlight)";

图片组件 (`src/tw/image.tsx`)

import { useCssElement } from "react-native-css";
import React from "react";
import { StyleSheet } from "react-native";
import Animated from "react-native-reanimated";
import { Image as RNImage } from "expo-image";

const AnimatedExpoImage = Animated.createAnimatedComponent(RNImage);

export type ImageProps = React.ComponentProps<typeof Image>;

function CSSImage(props: React.ComponentProps<typeof AnimatedExpoImage>) {
  // @ts-expect-error: 将 objectFit 样式映射到 contentFit 属性
  const { objectFit, objectPosition, ...style } =
    StyleSheet.flatten(props.style) || {};

  return (
    <AnimatedExpoImage
      contentFit={objectFit}
      contentPosition={objectPosition}
      {...props}
      source={
        typeof props.source === "string" ? { uri: props.source } : props.source
      }
      // @ts-expect-error: 样式已在上方重新映射
      style={style}
    />
  );
}

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

Image.displayName = "CSS(Image)";

动画组件 (`src/tw/animated.tsx`)

import * as TW from "./index";
import RNAnimated from "react-native-reanimated";

export const Animated = {
  ...RNAnimated,
  View: RNAnimated.createAnimatedComponent(TW.View),
};

使用方法

从你的 tw 目录导入封装了 CSS 的组件：

import { View, Text, ScrollView, Image } from "@/tw";

export default function MyScreen() {
  return (
    <ScrollView className="flex-1 bg-white">
      <View className="p-4 gap-4">
        <Text className="text-xl font-bold text-gray-900">你好 Tailwind!</Text>
        <Image
          className="w-full h-48 rounded-lg object-cover"
          source={{ uri: "https://example.com/image.jpg" }}
        />
      </View>
    </ScrollView>
  );
}

自定义主题变量

在 global.css 中使用 @theme 添加自定义主题变量：

@layer theme {
  @theme {
    /* 自定义字体 */
    --font-rounded: "SF Pro Rounded", sans-serif;

    /* 自定义行高 */
    --text-xs--line-height: calc(1em / 0.75);
    --text-sm--line-height: calc(1.25em / 0.875);
    --text-base--line-height: calc(1.5em / 1);

    /* 自定义 leading 比例 */
    --leading-tight: 1.25em;
    --leading-snug: 1.375em;
    --leading-normal: 1.5em;
  }
}

特定平台的样式

使用平台媒体查询实现特定平台的样式：

@media ios {
  :root {
    --font-sans: system-ui;
    --font-rounded: ui-rounded;
  }
}

@media android {
  :root {
    --font-sans: normal;
    --font-rounded: normal;
  }
}

使用 CSS 变量的 Apple 系统颜色

为 Apple 语义化颜色创建一个 CSS 文件：

/* src/css/sf.css */
@layer base {
  html {
    color-scheme: light;
  }
}

:root {
  /* 支持亮色/暗色模式的强调色 */
  --sf-blue: light-dark(rgb(0 122 255), rgb(10 132 255));
  --sf-green: light-dark(rgb(52 199 89), rgb(48 209 89));
  --sf-red: light-dark(rgb(255 59 48), rgb(255 69 58));

  /* 灰色阶 */
  --sf-gray: light-dark(rgb(142 142 147), rgb(142 142 147));
  --sf-gray-2: light-dark(rgb(174 174 178), rgb(99 99 102));

  /* 文本颜色 */
  --sf-text: light-dark(rgb(0 0 0), rgb(255 255 255));
  --sf-text-2: light-dark(rgb(60 60 67 / 0.6), rgb(235 235 245 / 0.6));

  /* 背景颜色 */
  --sf-bg: light-dark(rgb(255 255 255), rgb(0 0 0));
  --sf-bg-2: light-dark(rgb(242 242 247), rgb(28 28 30));
}

/* 通过 platformColor 使用 iOS 原生颜色 */
@media ios {
  :root {
    --sf-blue: platformColor(systemBlue);
    --sf-green: platformColor(systemGreen);
    --sf-red: platformColor(systemRed);
    --sf-gray: platformColor(systemGray);
    --sf-text: platformColor(label);
    --sf-text-2: platformColor(secondaryLabel);
    --sf-bg: platformColor(systemBackground);
    --sf-bg-2: platformColor(secondarySystemBackground);
  }
}

/* 注册为 Tailwind 主题颜色 */
@layer theme {
  @theme {
    --color-sf-blue: var(--sf-blue);
    --color-sf-green: var(--sf-green);
    --color-sf-red: var(--sf-red);
    --color-sf-gray: var(--sf-gray);
    --color-sf-text: var(--sf-text);
    --color-sf-text-2: var(--sf-text-2);
    --color-sf-bg: var(--sf-bg);
    --color-sf-bg-2: var(--sf-bg-2);
  }
}

然后在组件中使用：

<Text className="text-sf-text">主要文本</Text>
<Text className="text-sf-text-2">次要文本</Text>
<View className="bg-sf-bg">...</View>

在 JavaScript 中使用 CSS 变量

使用 useCSSVariable 钩子：

import { useCSSVariable } from "@/tw";

function MyComponent() {
  const blue = useCSSVariable("--sf-blue");

  return <View style={{ borderColor: blue }} />;
}

与 NativeWind v4 / Tailwind v3 的主要区别

无需 babel.config.js – 配置现在是 CSS 优先
PostCSS 插件 – 使用 @tailwindcss/postcss 而不是 tailwindcss
CSS 导入 – 使用 @import "tailwindcss/..." 而不是 @tailwind 指令
主题配置 – 在 CSS 中使用 @theme 而不是 tailwind.config.js
组件封装器 – 必须使用 useCssElement 封装组件以支持 className
Metro 配置 – 使用 withNativewind 并带有不同的选项（inlineVariables: false）

故障排除

样式未生效

确保你已在应用入口处导入 CSS 文件
检查组件是否已用 useCssElement 封装
验证 Metro 配置是否已应用 withNativewind

平台颜色不起作用

在 @media ios 代码块中使用 platformColor()
对于 web/Android，回退到 light-dark()

TypeScript 错误

在组件 props 中添加 className：

type Props = React.ComponentProps<typeof RNView> & { className?: string };

📄 原始文档

完整文档（英文）：

https://skills.sh/expo/skills/expo-tailwind-setup

💡 提示：点击上方链接查看 skills.sh 原始英文文档，方便对照翻译。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

Tailwind CSS Setup for Expo with react-native-css

🚀 快速安装

使用 react-native-css 在 Expo 中设置 Tailwind CSS

概述

安装

配置文件

Metro 配置

PostCSS 配置

全局 CSS

重要提示：无需 Babel 配置

CSS 组件封装器

主要组件 (`src/tw/index.tsx`)

图片组件 (`src/tw/image.tsx`)

动画组件 (`src/tw/animated.tsx`)

使用方法

自定义主题变量

特定平台的样式

使用 CSS 变量的 Apple 系统颜色

在 JavaScript 中使用 CSS 变量

与 NativeWind v4 / Tailwind v3 的主要区别

故障排除

样式未生效

平台颜色不起作用

TypeScript 错误

📄 原始文档

评论(0)

提示：请文明发言取消回复

近期文章

近期评论

Tailwind CSS Setup for Expo with react-native-css

🚀 快速安装

使用 react-native-css 在 Expo 中设置 Tailwind CSS

概述

安装

配置文件

Metro 配置

PostCSS 配置

全局 CSS

重要提示：无需 Babel 配置

CSS 组件封装器

主要组件 (src/tw/index.tsx)

图片组件 (src/tw/image.tsx)

动画组件 (src/tw/animated.tsx)

使用方法

自定义主题变量

特定平台的样式

使用 CSS 变量的 Apple 系统颜色

在 JavaScript 中使用 CSS 变量

与 NativeWind v4 / Tailwind v3 的主要区别

故障排除

样式未生效

平台颜色不起作用

TypeScript 错误

📄 原始文档

评论(0)

提示：请文明发言 取消回复

相关文章

(flutter-expert – 编程框架 | 汇易宝)

ckm%3Abrand – 汇易宝

(antfu – 编程框架 | 汇易宝)

auth0-nextjs – 汇易宝

近期文章

近期评论

主要组件 (`src/tw/index.tsx`)

图片组件 (`src/tw/image.tsx`)

动画组件 (`src/tw/animated.tsx`)

提示：请文明发言取消回复