workspace/code/docusaurus/docs/coding/react-native/第三方库/02-nativewind.md

NativeWind 原子化 CSS 库

官网：https://www.nativewind.dev/docs/getting-started/installation

1. 安装依赖

   npx expo add nativewind react-native-reanimated react-native-safe-area-context
   npx expo add tailwindcss@^3.4.17 -- --save-dev
   

2. 运行 npx tailwindcss init 生成 tailwind.config.js 文件，添加配置：

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

3. 创建 global.css 文件：

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

注意在全局引入

4. 修改 babel.config.js 文件：

   如果没有该文件，执行 npx expo customize babel.config.js 命令创建。

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

5. 修改 metro.config.js 文件：

   如果没有该文件，执行 npx expo customize 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. 新建 src/types/nativewind-env.d.ts 文件：

   /// <reference types="nativewind/types" />
   

7. 安装 react-native-css-interop ：

   npx expo install react-native-css-interop
   

8. 检验是否生效

   import { Text, View } from 'react-native'
   import './global.css'
   
   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>
     )
   }
   

   如果不生效，记得修改 tailwind.config.js 的目标路径：

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