★ FEATURED ARTICLE 【免费下载链接】nshNative Shell is a native UI framework for iOS, Android, macOS, Windows, Linux and the web, built in Rust.项目地址https://gitcode.com/gh_mirrors/nsh6/nsh点击查看免费下载Native Shellnsh是一个用 Rust 构建的原生 UI 框架覆盖 iOS、Android、macOS、Windows、Linux 和 Web 六大平台。本篇Native Shell 样式指南带你快速掌握它的三大样式核心Tailwind 类、主题令牌theme tokens与自适应颜色让你一套代码同时搞定亮色/深色模式无需重复写两份颜色值。为什么 Native Shell 的样式对新手很友好Native Shell 的样式完全沿用Tailwind CSS 4的语义你在 Web 上写过的p-4、rounded-2xl、dark:bg-zinc-800在原生视图上原样生效。框架在核心层直接解析类字符串不生成 CSS、不跑 JS并做了三件贴心的事✅ 同名类后写覆盖先写p-2 p-4结果就是p-4组件可以自由追加调用方传入的class无需tailwind-merge✅ 状态变化按压、深色模式、窗口宽度变化由核心原生重应用active:反馈不回跳你的代码✅ 写错的类名会在构建期给出警告见下文而不是运行时才暴露。样式有三种等价写法选你顺手的即可TSX 的class属性、TSX 的style属性camelCase 对象以及 Rust 的类型化链式方法.p_4()即p-4。完整属性清单见 style reference。快速上手 Tailwind 类三步写出一个卡片以最常见的圆角卡片 按压反馈 深色模式为例只需三步第 1 步静态外观用class。布局、间距、颜色、阴影一行写完View classflex-row items-center gap-3 rounded-2xl bg-white p-4 shadow-lg Text classtext-base font-semibold text-zinc-900Native Shell 卡片/Text /View第 2 步动态条件用classList。类名到布尔条件的映射为真才生效View classrounded-lg px-4 py-2 transition-colors classList{{ bg-indigo-600: selected(), bg-zinc-200: !selected(), opacity-50: busy() }} /第 3 步交互与深色模式交给变体variant。常用变体一览变体生效时机active:/hover:视图被按压 / 指针悬停focus:、disabled:、selected:输入框聚焦、元素禁用、选中态dark:系统处于深色外观sm:md:lg:xl:2xl:窗口宽度 ≥ 640 / 768 / 1024 / 1280 / 1536 ptportrait:/landscape:窗口横竖屏方向ios:/android:/web:指定平台如ios:pt-2变体可以任意叠加例如dark:active:bg-zinc-700表示深色模式下按压时。注意断点比较的是窗口宽度而非设备iPad 分屏或可缩放窗口里也能正确响应。Rust 侧同样有类型化等价物active:对应.active(|s| ..)dark:对应AdaptiveColor或.dark(|s| ..)方法名与类名一一对应p-4→.p_4()zinc-900→ZINC.shade(900)且由编译器检查不会拼错。配置主题一个文件统一全 App 的配色与圆角Native Shell 的主题分两层都写在 nsh.json 里tailwind扩展 Tailwind 默认主题品牌色、断点、圆角等作用于类名themeshadcn/ui 风格的设计令牌文件作用于bg-primary、rounded-(--radius)这类令牌类名也供 Rust 的theme()和 TSX 的token()读取。在tailwind下加一个品牌色{ tailwind: { colors: { brand: { 500: #7c3aed, DEFAULT: #7c3aed } }, breakpoints: { tablet: 600 } } }配置后bg-brand-500、text-brand、tablet:flex-row立即成为合法类名未知键或非法值会直接报构建错误主题在首帧前就已编译进 bundle。主题令牌则让 TSX、Rust 组件读取同一套设计变量。官方示例画廊的主题文件可以对照学习nsh-gallery-ui/theme.json、gallery-rs/theme.json。令牌天然带亮/暗两套值这是下一节的关键。默认主题定义在 default-theme.jsonshadcn 的 neutral 黑白配色 10pt 圆角主题解析的源码在 crates/nsh-core/src/tailwind/theme.rs。自适应颜色深色模式零成本适配这是 Native Shell 样式最省事的地方——颜色跟着系统外观自动切换不写第二遍主题令牌自带双外观主题文件中light/dark各写一份theme段为两者共有。于是bg-primary、text-muted-foreground、theme().primary、token(primary)在系统切换外观时原生变色无需任何dark:类也没有重绘。TSX 里的显式双色用colorScheme()读系统外观或直接用 Tailwind 的dark:变体Text classtext-zinc-900 dark:text-white跟随系统外观/TextRust 里的显式双色颜色方法接收AdaptiveColor亮色值 暗色值外观切换由系统原生完成view() .flex_1() .bg(AdaptiveColor::rgb(0xffffff, 0x0d1117)) .child(text(Follows the system appearance).text_color(AdaptiveColor::rgb(0x1f2328, 0xe6edf3)))⚠️ 一个小坑默认文字色两种外观都是黑色支持深色模式的应用请显式设置文字颜色或用主题令牌。构建期类检查写错类名当场报警运行nsh build、nsh dev、nsh run、nsh test时静态类名class字符串字面量与classList的键会用与运行时相同的解析器和主题逐一检查不存在的类会立刻警告warn nsh::build App.tsx:12:36: unknown class bg-brand-550警告不会中断构建运行时拼装的类如bg-${color()}-500则在首次被运行时看到时记录一次。所有支持的实用工具与变体清单见 Tailwind reference。进阶技巧清单style优先于classstyle{{ paddingLeft: 8 }}只替换pl-4对应的属性pr-4保留——按属性精准覆盖而不是整体替换!表示 important!p-0强制覆盖状态背景盖在渐变上与 Web 不同active:bg-*在bg-linear-*渐变面上也可见按压反馈不会被渐变吃掉文本类在容器上会被继承View classtext-white会让内部所有文字变白和 CSS 继承一致font-sans即应用字体未指定字族的文字都使用它可导入自定义字体后在主题中指定单位是 ptp-4 16pt1rem 16pt在 2×/3× 屏上自动换算为物理像素。延伸阅读资料说明styling.md边框、阴影、渐变、滤镜、变换与过渡的完整说明tailwind.md类名、变体、主题扩展的官方文档crates/nsh-core/src/tailwind/mod.rsTailwind 解析核心入口crates/nsh-core/src/tailwind/utilities.rs各实用工具类的解析实现examples/gallery/可直接运行的组件示例项目掌握 Tailwind 类、主题令牌与自适应颜色这三件套你就能用同一套样式语言把一份 UI 漂亮地铺到六个平台上 赞分享【免费下载链接】nshNative Shell is a native UI framework for iOS, Android, macOS, Windows, Linux and the web, built in Rust.项目地址https://gitcode.com/gh_mirrors/nsh6/nsh点击查看免费下载相关推荐GT New Horizons 社区资源指南从提问报 Bug 到选服务器的完整地图GT New Horizons 社区资源指南从提问报 Bug 到选服务器的完整地图 GT New Horizons下称 GTNH是围绕 GregTech游戏开发Material UI Native Color 深度解析用 nativeColor 让 CSS 变量主题走原生颜色计算Material UI Native Color 深度解析用 nativeColor 让 CSS 变量主题走原生颜色计算 本文围绕 Material UIM前端UI组件设计系统BewlyBewly Adapted Styles 开发指南编写深色模式与主题色适配样式的规范与实践BewlyBewly Adapted Styles 开发指南编写深色模式与主题色适配样式的规范与实践 导读 BewlyBewly 是一个对 Bilibili前端上一篇强力中文角色构建工具PoeCharm流放之路BD规划器完全指南下一篇jQuery Address与jQuery UI Tabs集成实战打造可书签的标签页系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
