Tailwind CSS

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

标准 Tailwind CSS 仅支持 Web 平台。对于通用支持，请使用 NativeWind 等库，它允许使用 Tailwind CSS 创建样式化的 React Native 组件。

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

¥Tailwind CSS is a utility-first CSS framework and can be used with Metro for web projects. This guide explains how to configure your Expo project to use the framework.

先决条件

¥Prerequisites

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

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

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

¥Ensure that your project is using Metro for web. You can verify this by checking the web.bundler field which is set to metro in the app.json file.

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

配置

¥Configuration

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

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

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
  // Ensure this points to your source code
  './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: [],
};

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

import '../global.css';

// Import the global.css file in the index.js file:
import './global.css';

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

@import 'tailwindcss';

// If using Expo Router, import your CSS file in the app/_layout.tsx file
import '../global.css';

// Otherwise import your CSS file in the index.js file:
import './global.css';

用法

¥Usage

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

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

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 Web 元素一起使用：

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

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）获得通用支持。

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

Android 和 iOS 的替代方案

¥Alternative for Android and iOS

或者，你可以使用 DOM 组件 在原生上的 WebView 中渲染你的 Tailwind Web 代码。

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

'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:

// 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:

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