expo: nativewind - 与 tailwind 配合

expo + tailwind 开发项目

创建项目

新项目，直接使用这个方案

npx rn-new@latest --nativewind
# 推荐 expo-nativewind 为我现在的项目名
# 创建好项目之后，中断，然后使用 mvg + yarn 进行安装即可
npx rn-new@latest expo-nativewind --nativewind

已有项目

参考这个，按这个步骤可以成功

https://docs.expo.dev/guides/tailwind/

# 1. 创建项目
yarn create expo-app --template blank
# 2. Install Nativewind
yarn add nativewind react-native-reanimated@~3.17.4 react-native-safe-area-context@5.4.0
yarn add --dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11
# 3. Setup Tailwind CSS - 注意这里，./App.js/App.tsx
npx tailwindcss init

/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all files that contain Nativewind classes.
  content: ["./App.js", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

# 4. global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

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

# 6. metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');
 
const config = getDefaultConfig(__dirname)
 
module.exports = withNativeWind(config, { input: './global.css' })

# 7. App.js 添加 global.css
import "./global.css"
import { Text, View } from "react-native";
 
export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-xl font-bold text-blue-500">
        Welcome to Nativewind!
      </Text>
    </View>
  );
}

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

alias 功能

yarn add --dev babel-plugin-module-resolver

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
    plugins: [
      [
        "module-resolver",
        {
          root: ["./"],
          alias: {
            "@": "./src",
          },
        },
      ],
    ],
  };
};

如果是 typescirpt 项目

# 1. 添加依赖
yarn add nativewind react-native-reanimated@~3.17.4 react-native-safe-area-context@5.4.0
yarn add --dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11

# 2. Setup Tailwind CSS -> ./tailwind.config.js
npx tailwindcss init

/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all files that contain Nativewind classes.
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
};

# 3. touch ./global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

# 4. Add the Babel preset -> ./babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

# 5. Create or modify your -> ./metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');
 
const config = getDefaultConfig(__dirname)
 
module.exports = withNativeWind(config, { input: './global.css' })

# 6. 项目中引用
import "./global.css"
 
export default App() {
  /* Your App */
}

# 7. app.json 添加这个配置
{
  "expo": {
    "web": {
      "bundler": "metro"
    }
  }
}