Tailwind CSS

编辑

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

标准的 Tailwind CSS 仅支持网页平台。要实现通用支持，请使用像 NativeWind 这样的库，它支持使用 Tailwind CSS 创建样式化的 React Native 组件。

Tailwind CSS 是一个实用优先的 CSS 框架，可以与 Metro 一起用于网页项目。本指南解释了如何配置你的 Expo 项目以使用该框架。

前提条件

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

app.json

package.json

global.css

index.js

确保你的项目使用 Metro 来进行网页开发。你可以通过检查 app.json 文件中设置为 metro 的 web.bundler 字段来验证这一点。

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: [
    // 确保这指向你的源代码
    './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;

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

app/_layout.tsx

import '../global.css';

index.js

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

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

现在你可以启动项目，并在你的组件中使用 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';

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

app/_layout.tsx

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

index.js

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

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

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

Terminal

- npx expo start

用法

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

app/index.tsx

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

你可以使用 { $$css: true } 语法将 Tailwind 与 React Native 网页元素结合使用：

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' }}>Welcome to Tailwind</Text>
    </View>
  );
}

针对 Android 和 iOS 的 Tailwind

Tailwind 不支持 Android 和 iOS 平台。你可以使用类似 NativeWind 的兼容性库以实现通用支持。

针对 Android 和 iOS 的替代方案

或者，你也可以使用 DOM 组件在本地的 WebView 中渲染你的 Tailwind 网页代码。

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">Welcome to Tailwind</p>
    </div>
  );
}

故障排除

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

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,
});