Skip to content
2023-11-14UI / STYLING约 2 分钟阅读

DESIGN TOOLCHAIN

样式与组件表达更加轻量、统一,并保持多端适配能力。

  • create-wl-app
  • 开箱即用
  • 脚手架
  • vite
  • React
  • Vue3
  • 前端
  • 前端框架

项目中添加了 unocss ​

  • 脚手架中集成了 unocss,配置文件是:unocss.config.js
  • 记得按照 VSCODE 插件 UnoCSS
  • 对不知道怎么写的样式,可以到 https://unocss.dev/interactive/ 查找对应的类名写法

为什么是用 原子化 CSS ​

  • 不用考虑类名定义
  • 开发上:可能为你甚至你们的前端团队节省很多写样式的时间,也能让你或者你们的项目开发体验有很大提升
  • 生产上:你们的项目打出来的包体积中的样式代码占比将突然骤降然后趋于不变。

不用 tailwindcss 的理由 ​

  • 现在说是比 tailwindcss 快 5 倍,其实当年可是比 tailwindcss JIT 模式快 200 倍的存在,后面 tailwindcss 应该是做了大量的优化工作,才让托尼老师改口称 5 倍快了 😜。
  • 相比于 tailwindcss 必须把原子类写到 class 里面, UnoCSS 提供了更多可选方案,并且兼容多种风格的原子类框架,除了 tailwindcss ,同样支持 Bootstrap, Tachyons,Windi CSS
  • 还支持属性化模式:
js
<div class="m-2 rounded text-teal-400" />
<!-- 现在你可以这么写: -->
<div m-2 rounded text-teal-400 />
  • 前缀组,解决繁琐的多次写前缀的情况
js
<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/>
<!-- 简化之后: -->
<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>
  • 还有种种好处,等待你的探索

cwa-stack —— 开箱即用,极速响应,让开发更简单、更高效