探索Tailwind2和Bootstrap5:两大CSS框架的对比

发表时间: 2021-02-03 19:33

哪一个更好?Bootstrap还是Tailwindcss?什么时候使用它们,为什我们不直接使用css,而要选择一个框架来使用css。

css

也许您从未听说过tailwindcss,或者你也没有听过bootstrap,不过这些都没有关系,接下来我会介绍下它们,并告诉您如何选择它们,如何使用它们。

什么是Tailwindcss,为什么要使用它

简而言之,Tailwindcss是一个帮您预定了很多类的css文件集合它包含很多经常使用的CSS样式,例如阴影,下划线,填充,边距,边框等,这意味着您大多数时间都不需要编写CSS,因为它已经为您预定义了。您所需要做的就是在你的html代码结构上添加已经在tailwindcss文件中定义好的类就行。

<h1 class="text-4xl border-b border-red-400">世界您好!</ h1>

在上面的示例中,text-4xl将字体大小设置为2.25rem,border-b将在边框底部添加1px的宽度,border-red-400将在边框颜色设置为RGBA(248,113,113)。这通常就是使用tailwindcss的方法。

tailwind

tailwindcss最优秀的特点就是它是可定制的,你可以选择生成仅包含你经常使用的特定类的CSS文件,你可以定义自己喜欢的动画,这样就不必一遍又一遍地重新定义它。

需要注意的是tailwindcss的所有配置都是在JavaScript中定义的,你可以非常方便地修改它们,此外,需要注意的事,如果要使用tailwindcss,你需要一个构建工具,可以是webpack或者是glup这些工具。

什么是Bootstrap,为什么要使用它

同样,bootstrap非常类似于tailwindcss。但是bootstrap的构建是为了提供可立即使用的UI组件(例如表单等),因此,您无需使用便从头创建组件,而只需使用bootstrap,搜索所需的组件,复制代码即可,就可以保证bootstrap将提供功能全面的组件,响应迅速并与所有浏览器兼容。

bootstrap

Bootstrap是由Twitter上的人们构建的,它具有庞大的社区,因此,如果您找不到所需的组件,或者想添加其网站中未包含的某些功能,那么你可以找到很多人帮助,因为bootstrap有着很广泛的社区。

使用bootstrap的方法很简单,你只需要在网页代码中引入所需要的css和js文件即可,然后你就可以调用它提供好的组件和样式。

bootstrap最引以为傲的是它的网格系统,你可以轻松地通过样式来布局页面,并且你也可以非常容易地写出响应式页面。

虽然bootstrap有着多出色的优点,但是当你想要更多地自定义样式的时候,很多的时候它会和bootstrap的默认样式冲突,不过这种问题在bootstrap5中已经改进了不少。

结论

相比较bootstrap,tailwindcss似乎使用起来稍显复杂一些,不过,当你熟悉了它的使用方式之后,你会发现自定义的构建组件是多么的方便。

如果你的网站自主设计不多,或者你想快速开发一个响应式网站,那么我推荐你使用bootstrap5,但是如果你想要更加精细地布局和设计你的网页,那么tailwind2将会是你最佳的选择。