Tailwind CSS都更新到4.0了，你还在抵触吗？

❝

更多 「“AI编程资讯”」 请关注AICoding专区：Https://juejin.cn/aicoding

❞

Tailwind CSS的体量

「Tailwind CSS」有多火爆呢？

几组数据告诉你？

一组数据告诉你 Tailwind CSS 有多受欢迎：

1. 「github 86.1K的 Star」, 足以证明它的受欢迎程度。
2. 「NPM 周下载量已突破 1000 万」, 前端开发者的不二之选
3. 「被无数大公司采用」，如 GitHub、Vercel、Laravel 等。
4. 「被很多框架和打包工具推荐」，如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变得比较长。但是，当你写的代码又长又乱的时候，你就要停下来想想

1. 「是否违背了创作者的初衷」
2. 「架构是否设计不合理」

为此，我们简单分析一下，到底是人的问题还是工具的问题。根据以上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 {          @apply flex justify-center items-center;        }        .btn-submit {          @apply bg-blue-500 text-white py-2 px-4 rounded;        }
        <div class="flex-center">            <el-buttonclsss="btn-submit">提交</el-button>        </div>

现在是不是很清晰了呢？

我敢说，只要你「使用@apply合并类名」，时刻记着「复用样式」，你的HMLT至少减少1/3，甚至也可以写出像诗一样的代码

• 因为没有分组和顺序性导致太乱

  没有顺序和分组的书写，是这样的

ounter(line  <divclass="p-2 font-bold text-[14px] mt-4 color-[#333333] bg-white">Hello world!</div>

想到哪写到哪，会让你的代码一眼望上去比较乱，时间长了，一眼看上去很难维护...

下面我们就着手解决这2个问题

1. 「类排序」

「使用 Prettier 进行类排序(Class sorting with Prettier)」

Tailwind CSS 维护了一个官方 Prettier 插件，它会自动按照我们的 推荐的类顺序 对你的类进行排序。

使用插件后，代码这样的

ounter(line  <divclass="bg-white color-[#333333] mt-4 p-2 text-[14px] font-bold">Hello world!</div>

现在是不是清晰很多了呢？

不过还不够

1. 「分组」

我们根据样式进行的类别分组，比如颜色，字体，定位，间距等等，每个类别一行，这样你写出的代码会清晰无比

ounter(lineounter(lineounter(lineounter(lineounter(line <divclass="            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为什么受到追捧

1. 「再也不用忍受css上下切换的痛苦了」

2. 「再也不用花时间去取语义化类名了」

   不用纠结container, wrapper, box等被使用的问题后，如何起名的问题了

3. 「为了加权重，不断的加父级类名，甚至!important」，永远不知道哪个样式起作用了。冗长的css让项目很难维护！

4. 简单完成伪类、伪元素、媒体查询等变体的书写

Tailwind CSS、PrimeFlex、UnoCSS评测

在CSS工具类框架中，除了Tailwind CSS之外，还有其他很多工具类。如PrimeFlex和UnoCSS，它们各有特点，下面我简单的评测一下

• 「PrimeFlex:」 生态系统较小，多适用于Prime生态，如PrimevVue，PrimeReact。样式和较Tailwind CSS低。只能构建起简单样式框架。最让我吐槽的是，样式竟然用!important。你想替换某个属性，麻烦程度想骂人！

• 「UnoCSS:」 未构建良好的生态系统，多用于自定义规则和项目优化

总结

「TailwindCSS」 已经成为前端开发的趋势之一，随着「4.0 版本」的发布，它的性能更强大、使用更方便。如果你还在抵触，不妨试试看，它可能会彻底改变你的 CSS 编写方式！