Bootstrap、Bulma、Tailwindcss前端UI框架对比

自我学编程以来，一直在围绕Web运用打转，而Web运用绕不开的一个问题就是UI设计。18年以前我都是自己设计UI，然后用原生HTML+CSS实现。但18年之后，我就很少自己写原生的了，原因有两个，一是维护成本高，二是时间有限。

于是就开始用UI框架，前后主要用过Bootstrap、Bulma、Tailwindcss三个框架，中途还自己封装了一个，但功能不是很完善，就废弃了，还是用主流的开源框架省事。

以下对我用过的几个前端UI框架，做一个简单对比，基本所有框架都是为了，解决修饰样式颗粒度的问题，以下是三种不同程度的颗粒度：

<div class="rounded-lg p-4"> Click </div> 
<div class="button"> Click </div> 
<Button> Click </Button>

Tailwindcss属于第一种，Bootstrap、Bulma属于第二种，ElementUI、AntDesign之类的属于第三种。当然第三种组件类框架，需要结合Vue或者React才能用，以后有机会再单独讨论。

一、Bootstrap

Twitter推出的一个用于前端开发的开源工具包，是目前最受欢迎的前端框架。目前这一版本的『陈华编程』网站，就是用Bootstrap写的，确实能大大加快开发速度，说不上好看，但也不是很丑，中规中矩吧。

二、Bulma

我最早知道这个框架，是看阮一峰的一篇博文：https://www.ruanyifeng.com/blog/2017/10/bulma.html

看配色比Bootstrap更有活力一些，就深入研究了一下。也挺好用，就是没有默认的js效果，需要自己补充，但确实比Bootstrap好看。

三、Tailwindcss

这是我最近才开始研究的一个框架，而且越研究越觉得这才是我想要的。之前用Bootstrap之类，总会觉得被掣肘，比如嫌按钮太大想调整，会非常困难。但用Tailwindcss就会很灵活，没有默认组件，全部自定义。

但也正是因为Tailwindcss的最小原子化的特征，被很多人吐槽说：这不就是行内样式吗？更多细节，可以参考 知乎 @山月 https://www.zhihu.com/question/337939566/answer/789979048

其实，Tailwindcss是提供了最小原子化的方案，如果你想封装成类似Bootstrap的class样式，也可以用@apply轻松实现。所以目前我用过的前端UI框架中，Tailwindcss是我觉得最灵活的，不出意外的话，我后面开发项目，都会用这个框架。

其他

除以上几个框架之外，我中途还零散的用过几个框架，比如Uikit、Layui和SemanticUI，都大同小异，感兴趣的都可以去了解。编程圈知名博主廖雪峰的个人网站，就是用Uikit搭建的，并且在他的Python3实战课程用到：https://www.liaoxuefeng.com/wiki/1016959663602400/1018490938509760

最后说明一点，前端UI框架虽然好用，但并不是万能的，他们有一个共有的问题就是：到底是设计图主导，还是框架主导。如果是在公司，有专业的UI设计做好了效果图，让你用代码实现，而且要求尺寸、颜色和设计图完全一致，那用框架就会很麻烦，要重写一大堆框架的默认样式，才能实现，那还不如用原生代码实现了。

所以，前端UI框架，特别适合像我这种时间有限的、不会设计的个人开发者，可以快速开发出美观大气的网页效果。

课程

关于Tailwindcss的使用方法，我录了一套《Tailwindcss实战商城模板》课程，欢迎订阅：

https://study.163.com/course/introduction/1212164821.htm