Tailwind CSS

编辑页面

学习如何在你的 Expo 项目中配置和使用 Tailwind CSS。

标准 Tailwind CSS 仅支持 Web 平台。若要获得通用支持，请使用类似 NativeWind 或 Uniwind 这样的库，它们允许使用 Tailwind CSS 创建带样式的 React Native 组件。

Tailwind CSS 是一个实用优先的 CSS 框架，可与 Metro 一起用于 Web 项目。本指南将说明如何配置你的 Expo 项目以使用该框架。

先决条件

将修改以下文件以设置 Tailwind CSS 配置：

app.json

package.json

global.css

index.js

确保你的项目正在为 Web 使用 Metro。你可以通过检查 web.bundler 字段来验证这一点，该字段在 app.json 文件中设置为 metro。

app.json

{
  "expo": {
    "web": {
      "bundler": "metro"
    }
  }
}

配置

请根据 Tailwind PostCSS 文档在你的 Expo 项目中配置 Tailwind CSS。

安装 tailwindcss 及其所需的同级依赖。然后运行初始化命令，在项目根目录中创建 tailwind.config.js 和 post.config.js 文件。

Terminal

# 安装 Tailwind 及其同级依赖

- npx expo install tailwindcss@3 postcss autoprefixer --dev

# 创建 Tailwind 配置文件

- npx tailwindcss init -p

将所有模板文件的路径添加到 tailwind.config.js 中。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // 确保这里指向你的源代码
    './src/app/**/*.{js,tsx,ts,jsx}',
    // 如果你使用 `src` 目录，请添加：'./src/**/*.{js,tsx,ts,jsx}'
    // 对 `components`、`hooks`、`styles` 或任何其他顶级目录也同样处理
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

如果你正在使用 Expo Router，建议使用根级 src 目录来简化这一步。了解更多关于顶级 src 目录的信息。

在项目根目录创建一个 global.css 文件，并为 Tailwind 的每一层添加指令：

global.css

/* 此文件添加 Tailwind 正常工作所需的实用类。 */
@tailwind base;
@tailwind components;
@tailwind utilities;

在你的 src/app/_layout.tsx（如果使用 Expo Router）或 index.js 文件中导入 global.css 文件：

src/app/_layout.tsx

import '../../global.css';

index.js

// 在 index.js 文件中导入 global.css 文件：
import './global.css';

如果你正在使用 DOM 组件，由于它们不共享全局变量，请将此文件导入添加到每个使用 "use dom" 指令的模块中。

始终在根级 _layout.tsx 中导入全局 CSS，而不是在嵌套布局中。Expo Router 会从根布局开始遍历依赖图。在嵌套布局中导入 CSS（例如 app/blog/_layout.tsx）会导致 node_modules 中的 CSS 先于你的自定义样式加载，这可能会破坏你期望的样式顺序。

现在启动你的项目，并在组件中使用 Tailwind CSS 类。

Terminal

- npx expo start

安装 tailwindcss 及其所需的同级依赖：

Terminal

# 安装 Tailwind 及其同级依赖

- npx expo install tailwindcss @tailwindcss/postcss postcss --dev

将 Tailwind 添加到你的 PostCSS 配置中

postcss.config.mjs

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

创建一个导入 Tailwind CSS 的全局 CSS 文件。

你可以为此文件选择任意名称。使用 global.css 是常见做法。

global.css

@import 'tailwindcss';

在你的 src/app/_layout.tsx（如果使用 Expo Router）或 index.js 文件中导入你的 CSS 文件：

src/app/_layout.tsx

// 如果使用 Expo Router，请在 src/app/_layout.tsx 文件中导入你的 CSS 文件
import '../../global.css';

index.js

// 否则在 index.js 文件中导入你的 CSS 文件：
import './global.css';

如果你正在使用 DOM 组件，由于它们不共享全局变量，请将此文件导入添加到每个使用 "use dom" 指令的模块中。

始终在根级 _layout.tsx 中导入全局 CSS，而不要在嵌套布局中导入。Expo Router 会从根布局开始遍历依赖图。在嵌套布局中导入 CSS（例如 app/blog/_layout.tsx）会导致 node_modules 中的 CSS 先于你的自定义样式加载，这可能会破坏你期望的样式顺序。

现在启动你的项目，并在组件中使用 Tailwind CSS 类。

Terminal

- npx expo start

用法

你可以直接在 React DOM 元素中使用 Tailwind：

src/app/index.tsx

export default function Index() {
  return (
    <div className="bg-slate-100 rounded-xl">
      <p className="text-lg font-medium">欢迎使用 Tailwind</p>
    </div>
  );
}

你可以使用 { $$css: true } 语法将 Tailwind 与 React Native web 元素一起使用：

src/app/index.tsx

import { View, Text } from 'react-native';

export default function Index() {
  return (
    <View style={{ $$css: true, _: 'bg-slate-100 rounded-xl' }}>
      <Text style={{ $$css: true, _: 'text-lg font-medium' }}>欢迎使用 Tailwind</Text>
    </View>
  );
}

Android 和 iOS 的 Tailwind

Tailwind 不支持 Android 和 iOS 平台。你可以使用兼容性库，例如 NativeWind 或 Uniwind，以获得跨平台支持。

Android 和 iOS 的替代方案

或者，你可以使用 DOM components 在原生环境中的 WebView 里渲染你的 Tailwind Web 代码。

src/app/index.tsx

'use dom';

// 记得在每个 DOM 组件中导入 global.css 文件。
import '../../global.css';

export default function Page() {
  return (
    <div className="bg-slate-100 rounded-xl">
      <p className="text-lg font-medium">欢迎使用 Tailwind</p>
    </div>
  );
}

故障排查

如果你在 metro.config.js 中自定义了 config.cacheStores，你需要扩展 FileStore 的 Expo 超类：

metro.config.js

// 导入具有 PostCSS 支持的 Expo 超类。
const { FileStore } = require('@expo/metro-config/file-store');

config.cacheStores = [
  new FileStore({
    root: '/path/to/custom/cache',
  }),
];

module.exports = config;

请确保你没有在 metro.config.js 中禁用 CSS：

metro.config.js

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname, {
  // 使用 Tailwind 时，不要禁用 CSS 支持。
  isCSSEnabled: true,
});