Expo整合Tailwind CSS

一、Tailwind CSS是什么？

ailwind CSS 是一个实用优先（utility-first）的 CSS 框架，它通过提供大量低级的、单一用途的 CSS 类来帮助开发者快速构建自定义设计，而无需离开 HTML 文件。

二、安装相关依赖

npx expo install nativewind react-native-reanimated@~3.17.4 react-native-safe-area-context@5.4.0
npx expo install --dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11

三、配置

npx tailwindcss init

编辑tailwind.config.js

/**
 * 指定src目录下的文件允许使用tailwindcss，可自行修改
 * */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

在项目根目录下创建global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

创建babel.config.js和metro.config.js

npx expo customize

修改babel.config.js

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

修改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' })

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
      "@components/*": ["./components/*"],
      "@screens/*": ["./screens/*"],
      "@assets/*": ["./assets/*"],
      "@utils/*": ["./utils/*"],
      "@hooks/*": ["./hooks/*"],
      "@constants/*": ["./constants/*"],
      "@services/*": ["./services/*"],
      "@store/*": ["./store/*"]
    }
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

案例

import {View,Text} from "react-native";
import './global.css'
export default ()=>{
    return <View className='flex-1 justify-center items-center'>
        <Text>Hello Expo!</Text>
    </View>
}

如果允许时控制台报Cannot find module 'react-native-worklets/plugin'这个错误，需要安装这个依赖

npx expo install react-native-worklets