Expo如何配置Tailwindcss

💡总共分为简单三步

1 安装

2 配置文件（没有该配置文件手动创建一个同名文件配置就行）

3 最后就可以直接使用了。本次配置方法主要针对expo50版本及以上的 49的有细微差异去官网复制49版本的配置文件即可。

安装:

yarn add nativewind@^4.0.1 react-native-reanimated tailwindcss

配置文件:

tailwind.config.js

// 根目录创建 tailwind.config.js 如下配置：
/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all of your component files.
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

babel.config.js

// 配置babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

metro.config.js

// 根目录创建 metro.config.js 如下配置：
// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);
const { withNativeWind } = require('nativewind/metro');
module.exports = withNativeWind(config, { input: './global.css' })

global.css

/* 根目录创建 global.css 并写入以下配置： */
@tailwind base;
@tailwind components;
@tailwind utilities;

// app_layout.tsx引入global.css
import { Stack } from "expo-router";
import "react-native-reanimated";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import "../global.css";

export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}> 
      <Stack> 
        <Stack.Screen name="(tabs)" options={{ headerShown: false, title: "主页" }} />
        <Stack.Screen name="+not-found" />
      </Stack>
    </GestureHandlerRootView>

  );
}

使用：

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

// 注意点：在SafeAreaView中不生效
export default function HomeScreen() {
  return <View className="flex-1 bg-red-300"> <Text>hello world</Text> </View> 
}

最新文档参考：Expo Router | NativeWind