从 Tailwind 到 NativeWind: React Native 样式开发新方式想在 React Native

引言

在 Web 开发领域, Tailwind CSS 以其实用为先 (utility-first) 的设计理念和极高的开发效率, 迅速成为前端工程师们喜爱的样式工具。它抛弃了传统的组件化样式写法, 转而通过一套简洁、可组合的类名系统, 让开发者可以 「所见即所得」 地构建界面。而随着跨端需求的日益增长, 如何在 React Native 中延续这种高效的开发体验, 成为了许多开发者关注的焦点。

这也正是 NativeWind 出现的背景: 它将 Tailwind CSS 的思想带入了 React Native, 让我们能够在移动端开发中, 像写 Web 一样使用类名快速布局和美化组件。本文将从零开始, 带你一步步完成 NativeWind 的安装与环境配置, 助你在 React Native 项目中也能尽享 Tailwind 的爽感。

一、什么是 NativeWind

NativeWind 是一个用于 React Native 的库, 它让你可以像在 Web 中使用 Tailwind CSS 一样, 在 React Native 项目中写 「类名」 来快速编写样式。

也就是我们在 React Native 中可以用类似下面的方式编写样式:

<View className="flex-1 items-center justify-center bg-white">
  <Text className="text-lg font-bold text-blue-500">Hello NativeWind</Text>
</View>

是不是感觉和在 Web 中写 Tailwind 一样? 这就是 NativeWind 的强大之处。

那么它怎么实现的呢? 其实 NativeWind 背后是通过 babel plugin + StyleSheet API 的方式, 在编译期就把这些 类名(className) 转为 React Native 能识别的 StyleSheet 对象, 所以这里是不会有性能负担的, 可以放心大胆的使用。

二、环境配置

第一步先配置环境....

2.1 安装相关依赖

第一步先安装相关依赖, 注意截止目前(2025.04.15), nativewind 仅支持 3.x 版本的 tailwindcss, 当然这里你可以不用管, 直接执行下面命令安装就行, 默认就是安装的 3.x 版本的 tailwindcss:

npm install nativewind tailwindcss

2.2 新增 Tailwind 配置文件

下面我们需要添加 Tailwind 配置文件, 这里我们直接下列命令:

npx tailwindcss init

该命令会在项目根目录下自动创建 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: [],
}

2.3 Babel 配置

这里直接在根目录下创建 babel 配置文件 babel.config.js, 并添加如下内容:

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

2.4 Metro 配置

同样的, 这里直接在根目录下创建 metro.config.js 配置文件, 并添加如下内容:

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname)

module.exports = withNativeWind(config, { input: './app/global.css' })

2.5 添加 Tailwind 指令

在 app 目录下创建一个 CSS 文件 global.css 并添加如下内容(Tailwind 指令):

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

然后需要再在 app/_layout.tsx 中引入该样式文件:

...
+ import './global.css'
...

2.6 修改 app.json 配置文件

我初始完后的项目, 该配置文件 expo.web.bundler 配置项的值就是 metro 所以我这边是没有做调整的:

{
  "expo": {
    "web": {
+     "bundler": "metro"
    }
  }
}

三、使用测试

先运行项目

然后在任意页面添加一个容器, 并通过 className 设置样式, 如下代码所示:

<View className='w-[100] h-[100] bg-blue-500'></View>

最终如果在页面中显示一个长宽 100, 背景为蓝色的容器, 则说明 Nativewind 正常配置完成

四、参考

Nativewind.dev