Repolode
提交项目
nativewind

nativewind/nativewind

将 Tailwind CSS 实用类带入 React Native 应用的样式库，样式在构建时编译。

在 GitHub 查看官网
Star
8,118
Fork
411
未关闭 Issue
67
最近提交
5天前

这是什么？

NativeWind 让 React Native 开发者可以直接使用 Tailwind CSS 的实用类来编写组件样式。它是样式库而非组件库，负责把类名映射为样式，UI 组件需要自行搭建或使用基于它的第三方组件库。

样式在应用构建阶段由 Tailwind CSS 编译器处理，运行时只保留一个小型运行时，用于响应设备方向、深色模式等动态变化。它会为不同平台选择合适的样式方案，例如原生端使用 StyleSheet.create，Web 端通过 react-native-web 使用 CSS。

支持的功能包括 CSS 变量、深色模式、任意类名、媒体查询、动画与过渡、容器查询（不含基于样式的容器查询），以及在兼容组件上的 hover、focus、active 伪类，并可通过 group 语法实现父元素状态驱动子元素样式。

核心功能

  • 01支持 React Native 各平台，并为每个平台选择合适的样式系统。
  • 02基于 Tailwind CSS 编译器，样式在构建时计算。
  • 03支持深色模式、任意类名、媒体查询和 CSS 变量。
  • 04支持动画、过渡效果和容器查询。
  • 05通过 group 语法，让父元素的伪类状态驱动子元素样式。

适用场景

  • 使用 Tailwind 风格的类名为 iOS、Android 和 Web 构建 React Native 或 Expo 应用。
  • 将 Web 项目中的 Tailwind 使用习惯和类名迁移到移动端代码库。
  • 借助 CSS 变量和深色模式，为移动应用建立统一的主题系统。

快速上手

  1. 1

    使用 NativeWind v4.1 创建预配置的 Expo 项目

    npx rn-new@latest --nativewind
  2. 2

    或使用 NativeWind v5（候选发布版）创建项目

    npx rn-new@next --nativewind
  3. 3

    或按照安装指南将 NativeWind 添加到现有项目中

使用前须知

  • 第五版仍为候选发布版。

收录于专题

Android 应用与手机工具

标签

#react-native#tailwind-css#css#styling#react#cross-platform#mobile#nativewind#react-native-web#tailwind

常见问题

nativewind 是什么？
将 Tailwind CSS 实用类带入 React Native 应用的样式库，样式在构建时编译。 NativeWind 让 React Native 开发者可以直接使用 Tailwind CSS 的实用类来编写组件样式。它是样式库而非组件库，负责把类名映射为样式，UI 组件需要自行搭建或使用基于它的第三方组件库。
nativewind 可以免费使用吗？用的什么许可证？
nativewind 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
nativewind 还在维护吗？
活跃维护中。nativewind 最近一次提交是在 2026年11月2日。
nativewind 适合用来做什么？
使用 Tailwind 风格的类名为 iOS、Android 和 Web 构建 React Native 或 Expo 应用。 将 Web 项目中的 Tailwind 使用习惯和类名迁移到移动端代码库。 借助 CSS 变量和深色模式，为移动应用建立统一的主题系统。
nativewind 怎么安装和运行？
使用 NativeWind v4.1 创建预配置的 Expo 项目: npx rn-new@latest --nativewind 或使用 NativeWind v5（候选发布版）创建项目: npx rn-new@next --nativewind 或按照安装指南将 NativeWind 添加到现有项目中
在哪里获取 nativewind？
源代码和安装说明在 GitHub 上：https://github.com/nativewind/nativewind

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目