用过 UnoCSS 之后,为什么我还是选择了 Tailwind CSS?

大家好,我是 前端架构师 - 大卫

更多优质内容请关注微信公众号 @前端大卫

初心为助前端人🚀,进阶路上共星辰✨,

您的点赞👍与关注❤️,是我笔耕不辍的灯💡。

背景

在实际项目中,我使用过 Tailwind CSS(3.x.x 版本)和 UnoCSS

首先,简单介绍一下它们的区别:

  • Tailwind CSS 是一个 CSS 框架(Library),提供了预定义的实用类(Utility Classes)。开发者可以通过组合这些类快速构建 UI。
  • UnoCSS 更像是一个原子 CSS 引擎(Engine),其核心是按需(on-demand)生成 CSS 的机制。通过 Preset 配置,它可以模仿 Tailwind CSS 的行为,同时也能实现其他不同的风格。

区别

特性 Tailwind CSS UnoCSS
类型 CSS 框架(Library) CSS 生成引擎(Engine)
设计模式 预定义类库 + JIT 纯 JIT 按需生成
体积 需要编译所有类,最终输出较大 仅生成实际使用的类,输出更小
灵活性 通过 @apply 或插件扩展 高度可配置,可完全自定义规则
生态 庞大的官方/社区插件 需要手动配置 Presets
配置方式 tailwind.config.js uno.config.ts
默认支持的功能 颜色、间距、布局等 仅提供核心引擎,需要 Presets 扩展
性能 JIT 模式已优化,但解析过程相对 UnoCSS 仍较重 解析速度极快,适用于 Vite 等前端工具

UnoCSS 在实际项目中的体验

优点

  • 灵活性极高 ,可完全自定义 rules 规则。
  • 与 Vite 集成良好,适用于现代前端开发。

缺点

  • 配置错误会导致进程崩溃 :如果 uno.config.ts 配置出现语法错误,整个开发环境会终止进程,需要手动重启,影响开发体验。
  • 规范化不足,不利于团队协作:由于 UnoCSS 过于灵活,团队协作时可能会遇到命名不统一的问题。
  • @apply 语法与 postcss-pxtorem 兼容性问题@apply 语法中的 px 值不会被 postcss-pxtorem 转换为 rem,因此有时需要定义重复样式,增加了维护成本。
  • VSCode 插件不支持部分规则的预览 :例如,定义 bg-rgba(0,236,245,0.6) 这样的规则后,UnoCSS 的 VSCode 插件无法提供预览。

Tailwind CSS 在实际项目中的体验

优点

  • 配置错误不会导致进程崩溃 :如果 tailwind.config.ts 语法错误,开发环境不会直接终止,容错性更好。
  • 生态完善,开发体验良好
    • Tailwind CSS IntelliSense:提供代码补全,提高开发效率。
    • prettier-plugin-tailwindcss:自动排序样式,提高可读性。
    • tailwind-merge:解决样式冲突问题,使代码更清晰。
  • 丰富的实用类 :例如 group:odd:even,可以更高效地实现复杂 UI 需求。
  • 官方文档详细,阅读体验良好:方便开发者快速上手。

缺点

  • 初学者上手需要一定时间:要熟练使用 Tailwind CSS,需要先花时间阅读官方文档,了解其设计理念和用法。

总结

Tailwind CSS 生态成熟,官方文档详细,开发体验优秀,适合大多数前端项目,尤其适合团队协作。它默认使用 JIT 生成模式,最终构建体积通常较小,且有丰富的插件和工具支持,提高了开发效率。

UnoCSS 则更加灵活,按需生成 CSS,使得最终体积更小,并且解析速度极快,特别适用于 Vite 项目。它允许完全自定义规则,但也因此需要更多手动配置,可能导致团队协作不够规范 ,同时其错误处理机制较弱,配置错误可能会导致开发进程直接终止,影响体验

如果你希望有一套完善的 UI 解决方案,Tailwind CSS 更适合;如果你追求极致的按需加载和高度可定制的 CSS 生成,UnoCSS 是更好的选择。

相关推荐
excel4 分钟前
前端必备:从能力检测到 UA-CH,浏览器客户端检测的完整指南
前端
前端小巷子11 分钟前
Vue 3全面提速剖析
前端·vue.js·面试
悟空聊架构18 分钟前
我的网站被攻击了,被干掉了 120G 流量,还在持续攻击中...
java·前端·架构
CodeSheep19 分钟前
国内 IT 公司时薪排行榜。
前端·后端·程序员
尖椒土豆sss23 分钟前
踩坑vue项目中使用 iframe 嵌套子系统无法登录,不报错问题!
前端·vue.js
遗悲风24 分钟前
html二次作业
前端·html
江城开朗的豌豆27 分钟前
React输入框优化:如何精准获取用户输入完成后的最终值?
前端·javascript·全栈
CF14年老兵27 分钟前
从卡顿到飞驰:我是如何用WebAssembly引爆React性能的
前端·react.js·trae
画月的亮31 分钟前
前端处理导出PDF。Vue导出pdf
前端·vue.js·pdf
江城开朗的豌豆37 分钟前
拆解Redux:从零手写一个状态管理器,彻底搞懂它的魔法!
前端·javascript·react.js