md文

• • 首页
  • BOT
  • 沸点
  • 课程
  • 直播
  • 活动
  • 竞赛
  • 商城
  • APP
  • 插件

---

    -   创作者中心

-   ![vip](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5fd34a2110be4ad7a377334b7033996c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Ium5ZG95omT5bel5Lq6:q75.awebp?rk3s=f64ab15b&x-expires=1772254793&x-signature=339BTPSyA6vhjPitHZEcmLURaGA%3D)

    会员

-   [](https://juejin.cn/notification)

-   ![摄影的头像](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/46d26530316045688a32ef0908d03839~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Ium5ZG95omT5bel5Lq6:q75.awebp?rk3s=f64ab15b&x-expires=1772254793&x-signature=5RB2%2Bn8SaJCFMj7VJnyy4jxQ3oc%3D)

从 Tailwind CSS 到 UnoCSS —— 原子化真的是前端CSS的救星吗

阿祖zu

2023-08-0313,684阅读6分钟

专栏： 

框架对比

小编前言

追忆往昔，穿越前朝，CSS也是当年前端三剑客之一，风光的很，随着前端跳跃式的变革，CSS在现代前端开发中似乎有点默默无闻起来。

不得不说当看到UnoCSS之前，我甚至都还没听过原子化CSS这个概念（不够卷，惭愧，惭愧），很久没关注过CSS相关的内容了。

原子化CSS本身的概念和 Tailwind CSS、UnoCSS 设计都比较简单，这里主要想聊一下在现代前端中，原子化CSS到底是不是完美的解决方案，是不是解决CSS问题的正确方向。

概念-原子化CSS

原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。

听起来厉害，但实现的最终方式超级简单，核心就是预置一大堆 class 样式，尽量将这些 class 样式简单化、单一化，在开发过程中，可以直接在 DOM 中写预置好的 class 名快速实现样式，而不需要每次写简单枯燥大量的 css 样式，如下代码所示：

1. 先预置一组class列表

css
代码解读
复制代码
.m-10 { margin: 10px; }
.p-5 { padding: 5px; }
.text-red { color: red; }
 // 无数个....

2. 编码时在dom中直接写class名，快速实现样式

html
代码解读
复制代码
<div class="m-10 p-5 text-red">
 	测试dom
</div>

而预置的class列表中的样式，有着一定的规律，开发者可以通过学习快速掌握，利用多个class在dom中的组合快速实现效果

😮😮，是不是看起来有点熟悉？（死去的 Bootstrap 攻击我），所以你觉得这是冷饭新炒，还是实用主义？

Tailwind CSS 广受欢迎

在 tailwindcss 的 github 上目前居然已经有了 70.8K 个 star ！！ ，最开始我是难以置信它竟会如此受欢迎的，npm 周下载量也超六百多万 。

Tailwind CSS 主张让你无需离开 HTML 即可快速构建网站，并有许多非常非常实用的优点：

• 对 class 极致的封装，最大程度提高复用性
• 易扩展的的各种自定义配置
• 构建时清除未引用的 css 样式，解决生产环境 CSS 冗余的问题
• 舒适的响应式开发体验
• 函数、指令、布局、动画，......等等

几乎囊括了开发者日常原生 CSS 开发中遇到的所有头痛，不舒服的开发体验，所以说他确实是很实用的工具。Tailwind CSS 真的是为前端开发者造福了。

在前端构建工具链中 Tailwind CSS 作为 PostCSS 插件可与其他预处理结合使用，并优化 CSS 生产产物。

UnoCSS

Tailwind CSS 在过去几年广受欢迎，近两年 UnoCSS 又脱颖而出，这里需要先夸一下 UnoCSS 官网的图标&文字&背景色的色彩渐变联动主题，很酷！！

按 UnoCSS 作者的说法，UnoCSS 并非要替代 Tailwind CSS 而是从另一个角度使原子化CSS在业务中融合的更完美。

UnoCSS 作者是 Vite 团队成员，我觉得正是因为他作为 Vite 的开发者，对于工程化构建具有很高的敏感度，所以才能创造出 UnoCSS 将原子化的CSS与前端工程融合到极致。

那么 UnoCSS 做了哪些事呢：

1. 按需生成

   • 生成业务真正使用到的 class ，同时在开发和生产环境使用
   • 对比 Tailwind CSS 只在生产环节清除无引用代码，UnoCSS 在开发环节也通过文件监听按需传输，获得更快地性能（虽然已经很快了，但再快一点总归是个提升嘛）

2. 极具灵活性

   • UnoCSS 对自己定位是一个 CSS 引擎而非一个框架，所以它与 Tailwind CSS 应该是包含关系，UnoCSS 作为规则的制定者，而 Tailwind CSS 可以作为其中的一组 preset

     javascript
     代码解读
     复制代码
     import UnocssPlugin from '@unocss/vite'
     
     import PresetTachyons from '@unocss/preset-tachyons'
     import PresetBootstrap from '@unocss/preset-bootstrap'
     import PresetTailwind from '@unocss/preset-tailwind'
     import PresetWindi from '@unocss/preset-windi'
     import PresetAntfu from '@antfu/oh-my-cool-unocss-preset'
     
     export default {
       plugins: [
         UnocssPlugin({
           presets: [
             // PresetTachyons,
             PresetBootstrap,
             // PresetTailwind,
             // PresetWindi,
             // PresetAntfu
             // 选择其中一个...或多个！
           ]
         })
       ]
     }