中文网
🌐 Nodejs.cn
首页指南EAS参考学习

This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

Tailwind CSS

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

信息 标准 Tailwind CSS 仅支持 Web 平台。要实现通用支持，请使用诸如 NativeWind 或 Uniwind 这样的库，它们允许使用 Tailwind CSS 创建带样式的 React Native 组件。

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

先决条件

1 要求

一个使用 Metro 的网页项目

确保你的项目在网页端使用 Metro。通过检查 app.json 中 web.bundler 是否设置为 metro 来验证这一点：

app.json
{
  "expo": {
    "web": {
      "bundler": "metro"
    }
  }
}

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

🌐 The following files will be modified to set the Tailwind CSS configuration:

app.json
package.json
global.css
index.js

配置

🌐 Configuration

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

🌐 Configure Tailwind CSS in your Expo project according to the Tailwind PostCSS documentation.

1

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

🌐 Install tailwindcss and its required peer dependencies. Then, run the initialization command to create tailwind.config.js and post.config.js files in the root of your project.

Terminal
# Install Tailwind and its peer dependencies
- npx expo install tailwindcss@3 postcss autoprefixer --dev

# Create a Tailwind config file
- npx tailwindcss init -p
# Install Tailwind and its peer dependencies
- yarn expo install tailwindcss@3 postcss autoprefixer --dev

# Create a Tailwind config file
- yarn dlx tailwindcss init -p
# Install Tailwind and its peer dependencies
- pnpm expo install tailwindcss@3 postcss autoprefixer --dev

# Create a Tailwind config file
- pnpm dlx tailwindcss init -p
# Install Tailwind and its peer dependencies
- bun expo install tailwindcss@3 postcss autoprefixer --dev

# Create a Tailwind config file
- bunx tailwindcss init -p

2

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

🌐 Add paths to all of your template files inside tailwind.config.js.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // Ensure this points to your source code
    './src/app/**/*.{js,tsx,ts,jsx}',
    // If you use a `src` directory, add: './src/**/*.{js,tsx,ts,jsx}'
    // Do the same with `components`, `hooks`, `styles`, or any other top-level directories
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

如果你正在使用 Expo Router，可以考虑使用根 src 目录来简化此步骤。了解更多关于top-level src 目录的信息。

3

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

🌐 Create a global.css file in the root of your project and directives for each of Tailwind's layers:

global.css
/* This file adds the requisite utility classes for Tailwind to work. */
@tailwind base;
@tailwind components;
@tailwind utilities;

4

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

🌐 Import the global.css file in your src/app/_layout.tsx (if using Expo Router) or index.js file:

src/app/_layout.tsx
import '../../global.css';
index.js
// Import the global.css file in the index.js file:
import './global.css';

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

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

5

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

🌐 You now start your project and use Tailwind CSS classes in your components.

Terminal
- npx expo start
- yarn expo start
- pnpm expo start
- bun expo start

用法

🌐 Usage

你可以按原样将 Tailwind 与 React DOM 元素一起使用：

🌐 You can use Tailwind with React DOM elements as-is:

src/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 } 语法在 React Native Web 元素中使用 Tailwind：

🌐 You can use the { $$css: true } syntax to use Tailwind with React Native web elements:

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

适用于 Android 和 iOS 的 Tailwind

🌐 Tailwind for Android and iOS

Tailwind 不支持 Android 和 iOS 平台。你可以使用兼容库，如 NativeWind 或 Uniwind 来实现通用支持。

🌐 Tailwind does not support Android and iOS platforms. You can use a compatibility library such as NativeWind or Uniwind for universal support.

AI代理的 Expo 技能

🌐 Expo Skills for AI agents

如果你使用 AI 代理，安装 Expo Skills 来教它通用的 Tailwind CSS 设置：

🌐 If you use an AI agent, install Expo Skills to teach it universal Tailwind CSS setup:

Android 和 iOS 的替代方案

🌐 Alternative for Android and iOS

或者，你可以使用 DOM 组件 在原生环境中的 WebView 中渲染你的 Tailwind 网页代码。

🌐 Alternatively, you can use DOM components to render your Tailwind web code in a WebView on native.

src/app/index.tsx
'use dom';

// Remember to import the global.css file in each DOM component.
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>
  );
}

故障排除

🌐 Troubleshooting

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

🌐 If you have a custom config.cacheStores in your metro.config.js, you need to extend the Expo superclass of FileStore:

metro.config.js
// Import the Expo superclass which has support for PostCSS.
const { FileStore } = require('@expo/metro-config/file-store');

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

module.exports = config;

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

🌐 Ensure you don't have CSS disabled in your metro.config.js:

metro.config.js
/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname, {
  // Do not disable CSS support when using Tailwind.
  isCSSEnabled: true,
});