rntpc_nativewind:基于 React Native 生态的跨平台样式系统项目

基于 NativeWind 的 OpenHarmony 适配版,使用 Tailwind CSS 语法为 React Native 编写样式的通用设计系统

分支4Tags2
文件最后提交记录最后更新时间
3 年前
4 年前
3 年前
3 年前
3 年前
3 年前
4 年前
3 年前
3 年前
4 年前
4 年前
4 年前
3 个月前
3 个月前
3 年前
4 年前
4 年前
3 年前
3 年前
3 年前
4 年前

Tailwind CSS

NativeWind

GitHub branch checks state npm npm GitHub

NativeWindTailwind CSS 用作高级脚本语言,以创建一套通用设计系统。通过使用各平台最佳的样式引擎(例如 CSS StyleSheet 或 StyleSheet.create),样式化组件可在所有 React Native 平台间共享。其目标是在所有平台上提供一致的样式体验,提升开发者体验、组件性能及代码可维护性。

NativeWind 在应用构建过程中处理样式,并通过轻量级运行时选择性地应用响应式样式(例如设备方向变化、明暗模式切换)。

实际效果

特性

  • 适用于所有 RN 平台,为每个平台选用最佳样式系统。
  • 采用 Tailwind CSS 编译器
  • 样式在构建时计算
  • 轻量级运行时确保组件高效运行
  • Babel 插件支持简单设置并提升智能感知能力
  • 支持所有 tailwind.config.js 设置,包括主题、自定义值、插件
  • 深色模式 / 任意类 / 媒体查询
  • 伪类 - 在兼容组件上支持hover / focus / active
  • 基于父组件状态的样式 - 根据父组件伪类自动设置子组件样式
  • 子组件样式 - 基于父类创建简单布局

文档

所有文档均位于我们的网站 https://nativewind.dev

项目介绍

基于 NativeWind 的 OpenHarmony 适配版,使用 Tailwind CSS 语法为 React Native 编写样式的通用设计系统

定制我的领域