〔1〕背景 公司准备对之前的一个非前后端分离项目进行UI的全面改版，借此机会直接使用vue3对项目进行全面改造。但是页面非常之多，光是写样式想想就头疼。于是就在探寻一些可以简化样式开发的方案。

江湖传言TailwindCss 是目前最流行的 “原子化CSS框架” ？😱 并且截止目前为止已经斩获83.6k stars，而且社区也是异常的活跃👍🏻。它到底是什么？如何低成本学习它？

起因 可能你跟我一样头一次听说原子化CSS时，觉得写预设 class 听起来是一件极蠢的事，感觉这是在开倒车，因为我们都经历过 Bootstrap（其实不属于原子化） 的时代。 于是在这个概念刚刚在国

原子化 CSS 是一种 CSS 的编写方式，它将样式规则分解为独立的、可重复使用的小型类名，以实现更高度可组合和可重用的 CSS。显然原子化 CSS 并不适用于所有情况。

前言 原子化CSS(Atomic CSS）是近年来提出的一种CSS书写方式，与之有区别的是我们比较常用的组件化书写方式。今天介绍的是AntFu的开源新作原子化CSS引擎—UnoCSS。

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

每个前端人都经历过的一个痛处就是，在写页面ui样式时不停的在html文件（或代码区域）和css文件（或代码区域）之间来回切换，这种聚焦点分离让ui样式的开发有点点烦。原子化css正是这一痛处的...

目前 Tailwind CSS 在 GitHub 有 80k Stars、Npm 周下载量 733W，已经成为前端主流的 CSS 框架。 而 Next.js 脚手架默认集成 Tailwind C

不管是unocss还是tailwindcss和windicss，默认的单位都是rem，这有一定的设计理念，但其实这对于习惯使用px单位的人来说不太友好，有相当一部分人因为这点而放弃使用原子化css