Tailwind CSS

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

信息 标准 Tailwind CSS 仅支持网页平台。如需通用支持，可使用诸如 NativeWind 的库，它允许使用 Tailwind CSS 创建样式化的 React Native 组件。

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

先决条件

🌐 Prerequisites

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

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

确保你的项目正在为网页使用 Metro。你可以通过检查 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 } 语法在 React Native Web 元素中使用 Tailwind：

🌐 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 网页代码。

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