原创 高志小鹏鹏 2025-03-29 09:01 重庆
❝更多 「“AI编程资讯”」 请关注AICoding专区：Https://juejin.cn/aicoding
❞
Tailwind CSS的体量
「Tailwind CSS」有多火爆呢？
几组数据告诉你？
一组数据告诉你 Tailwind CSS 有多受欢迎：
从数据上看，「Tailwind CSS 已经成为前端开发的主流选择之一」。
「原子化 CSS」 是一种 「CSS 架构」，它提倡使用「高度可复用的小类名」，每个类名通常只控制「单一的样式属性」。例如：
ounter(line<div class="text-red-500 font-bold p-4 text-[14px]">Hello Tailwind</div>
其中：
这种方式避免了传统 CSS 中复杂的层叠规则，让样式控制更加直观。
说了这么一通，我相信用过的都说“「真香」”，用过一次后就离不开了。
关键是没用过的呢？是不是心里还在嘀咕。别急，正餐来了！
为什么说Tailwind CSS是一个宝藏，因为你担忧和抵触的地方，Tailwind CSS都给你解决了
你可能在担忧，我是不是每次用都要查文档呢？那么多css好不容易记住了，现在又让我再学一遍？
答案是：不用。完全和你使用css一样简单。只需要记住几个关键字，智能提示帮你搞定
❝VS Code插件 - Tailwind CSS IntelliSense
❞
首先，不可否认，将所有的类名整合到html中，会让你的html变得比较长。但是，当你写的代码又长又乱的时候，你就要停下来想想
为此，我们简单分析一下，到底是人的问题还是工具的问题。根据以上2点，分析一下你的HTML为什么又长又乱？
因为太长导致太乱
没有合并之前，你的代码可能是这样的
ounter(lineounter(lineounter(lineounter(line<div class="flex justify-center items-center"><el-button clsss="bg-blue-500 text-white py-2 px-4 rounded">提交</el-button></div>
合并后是这样的
ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line.flex-center {flex justify-center items-center;}.btn-submit {bg-blue-500 text-white py-2 px-4 rounded;}<div class="flex-center"><el-button clsss="btn-submit">提交</el-button></div>
现在是不是很清晰了呢？
我敢说，只要你「使用@apply合并类名」，时刻记着「复用样式」，你的HMLT至少减少1/3，甚至也可以写出像诗一样的代码
因为没有分组和顺序性导致太乱
没有顺序和分组的书写，是这样的
ounter(line<div class="p-2 font-bold text-[14px] mt-4 color-[#333333] bg-white">Hello world!</div>
想到哪写到哪，会让你的代码一眼望上去比较乱，时间长了，一眼看上去很难维护...
下面我们就着手解决这2个问题
「使用 Prettier 进行类排序(Class sorting with Prettier)」
Tailwind CSS 维护了一个官方 Prettier 插件，它会自动按照我们的 推荐的类顺序 对你的类进行排序。
使用插件后，代码这样的
ounter(line<div class="bg-white color-[#333333] mt-4 p-2 text-[14px] font-bold">Hello world!</div>
现在是不是清晰很多了呢？
不过还不够
我们根据样式进行的类别分组，比如颜色，字体，定位，间距等等，每个类别一行，这样你写出的代码会清晰无比
ounter(lineounter(lineounter(lineounter(lineounter(line<div class="bg-white color-[#333333]mt-4 p-2text-[14px] font-bold">Hello world!</div>
现在代码是不是清晰的多了
不用担心「公共类」的问题，@apply帮你搞定。
「使用 @apply 合并类」，前面已经讲过了，就不展开了
也许你还在担心「tailwind 的 class 名和我已有的 class 冲突了咋办？我怎么处理兼容问题」
别担心，给你的类名加个「前缀prefix」就搞定了
ounter(lineounter(lineounter(line@import "tailwindcss" prefix(tw);<div class="tw:flex tw:bg-red-500 tw:hover:bg-red-600"> <!-- ... --></div>
「再也不用忍受css上下切换的痛苦了」
「再也不用花时间去取语义化类名了」
不用纠结container, wrapper, box等被使用的问题后，如何起名的问题了
「为了加权重，不断的加父级类名，甚至!important」，永远不知道哪个样式起作用了。冗长的css让项目很难维护！
简单完成伪类、伪元素、媒体查询等变体的书写
在CSS工具类框架中，除了Tailwind CSS之外，还有其他很多工具类。如PrimeFlex和UnoCSS，它们各有特点，下面我简单的评测一下
最让我吐槽的是，样式竟然用!important。你想替换某个属性，麻烦程度想骂人！总结
「TailwindCSS」 已经成为前端开发的趋势之一，随着「4.0 版本」的发布，它的性能更强大、使用更方便。如果你还在抵触，不妨试试看，它可能会彻底改变你的 CSS 编写方式！
