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