Expo配置Tailwindcss

1、安装依赖

		yarn add nativewind@^4.0.1 tailwindcss

2、配置

tailwind.config.js

// 根目录创建
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

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;

3、使用

import { Text, View } from "react-native";
import "../global.css";

export default function Index() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text className="text-red-700">恭喜您成功将tailwind.css配置到Expo中.</Text>
    </View>
  );
}