HTML & CSS » 前端宝藏框架 Tailwind CSS，真的太香了

前端宝藏框架 Tailwind CSS，真的太香了

发表于: HTML & CSS. 评论
Sponsor

前端 er 们！今天必须给大家分享超火的 Tailwind CSS，最近研究它简直打开新世界大门！你们知道它有多火吗？Github 上 86.1K 的 Star NPM 周下载量突破 1000 万，GitHub、Vercel 这些大公司都在用，Vite、React 这些框架也推荐，妥妥的前端开发主流选择。

网址名称：Tailwind CSS
网址地址：https://tailwindcss.com/

Tailwind CSS的体量

「Tailwind CSS」有多火爆呢？

几组数据告诉你？

前端宝藏框架 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<div>Hello Tailwind</div>

其中：

  • 「text-red-500」: 代表文字颜色
  • 「font-bold」: 代表加粗
  • 「p-4」: 代表内边距
  • 「text-[14px]」: 代表字体大小为14px

这种方式避免了传统 CSS 中复杂的层叠规则，让样式控制更加直观。

原子化CSS和传统CSS的区别

前端宝藏框架 Tailwind CSS，真的太香了

说了这么一通，我相信用过的都说“「真香」”，用过一次后就离不开了。

关键是没用过的呢？是不是心里还在嘀咕。别急，正餐来了！

Tailwind CSS宝藏库

为什么说Tailwind CSS是一个宝藏，因为你担忧和抵触的地方，Tailwind CSS都给你解决了

类名难记

你可能在担忧，我是不是每次用都要查文档呢？那么多css好不容易记住了，现在又让我再学一遍？

答案是：不用。完全和你使用css一样简单。只需要记住几个关键字，智能提示帮你搞定

前端宝藏框架 Tailwind CSS，真的太香了

VS Code插件 – Tailwind CSS IntelliSense

HTML又长又乱

首先，不可否认，将所有的类名整合到html中，会让你的html变得比较长。但是，当你写的代码又长又乱的时候，你就要停下来想想

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

为此，我们简单分析一下，到底是人的问题还是工具的问题。根据以上2点，分析一下你的HTML为什么又长又乱？

因为太长导致太乱！

没有合并之前，你的代码可能是这样的

ounter(lineounter(lineounter(lineounter(line

<div><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 {@apply flex justify-center items-center;}.btn-submit {@apply bg-blue-500 text-white py-2 px-4 rounded;}

<div><el-button clsss=”btn-submit”>提交</el-button></div>

现在是不是很清晰了呢？

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

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

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

ounter(line<div>Hello world!</div>

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

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

  1. 「类排序」

「使用 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>

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

不过还不够

  1. 「分组」

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

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> <!– … –></div>

拥抱Tailwind CSS

Tailwind CSS为什么受到追捧

  1. 「再也不用忍受css上下切换的痛苦了」
  2. 「再也不用花时间去取语义化类名了」不用纠结container, wrapper, box等被使用的问题后，如何起名的问题了
  3. 「为了加权重，不断的加父级类名，甚至!important」，永远不知道哪个样式起作用了。冗长的css让项目很难维护！
  4. 简单完成伪类、伪元素、媒体查询等变体的书写

前端宝藏框架 Tailwind CSS，真的太香了

Tailwind CSS、PrimeFlex、UnoCSS评测

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

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

前端宝藏框架 Tailwind CSS，真的太香了

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

总结

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

来源：稀土掘金技术社区，作者高志小鹏鹏

赞助商链接

与 相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

{ 发表评论 }