Tailwind css优于Bootstrap 7个原因

在某些情况下,Tailwind css 比 Bootstrap 更好,因为它是一个低级 CSS 框架,可让您根据需要构建自己的自定义组件。如果使用得当,它非常注重性能,可以显着减少 CSS 负载并确保更快的渲染。如果 Web 性能和自定义是您的首要任务,请选择 Tailwind。

原因 1:Tailwind CSS 生成的 CSS 有效负载明显较小。

如果与 NextJS 和类似框架一起使用,Tailwind 将生成显着较低的 css 占用空间。例如,NextJS 能够查看您的标记并自动找出哪些 css 类需要与最终的 css 有效负载捆绑在一起。

Bootstrap以这种方式配置要复杂得多。

原因 2:Tailwind CSS 是一个低级的 CSS 框架,因此更适合定制。

把Tailwind 想象成一个装满乐高积木的袋子。

你可以用这些积木制作任何你想要的东西。

Bootstrap 更像是宜家组件,层次更高,提供的定制功能有限。

例如,Tailwind 的 CSS 没有为按钮提供任何类别;

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> My Buton

Bootstrap 会为按钮提供默认 CSS。

<button class="btn btn-primary"> My Buton

正如您所注意到的,Tailwind 为您提供了许多低级实用类来实现您的愿望,而 Bootstrap 则有一套固定的按钮类。

对于 Tailwind 来说,你通常会写出类似下面这样的内容:

.btn {     @apply font-bold py-2 px-4 rounded;   }   .btn-blue {     @apply bg-blue-500 text-white;   }   .btn-blue:hover {     @apply bg-blue-700;   }

原因 3:Tailwind 是 NextJS 等前端框架的默认选择。

NextJs 是时下非常流行的前端框架,它推广 Tailwind css 而不是 Bootstrap。该框架的几乎所有默认模板都是使用 Tailwind 设计的。

如果你想建立一个新网站,你很可能最终会使用 Nextjs 和 Tailwind。

原因 4:Tailwind 拥有一个活跃的社区,而 Bootstrap 是由一家正在经历复杂收购的公司运营的。

由于埃隆-马斯克收购了 Twitter,Bootstrap 的未来可能会像雅虎 UI 等早已被遗忘的框架一样前途未卜。虽然 Bootstrap 是开源的,即使 Twitter 放弃了对它的支持,该框架仍有可能得到世界各国的维护,但这可能会让它的未来变得坎坷不平。然而,尽管 Tailwind 得到了一家小公司的支持,但它的地位太低,不会受到公司命运变化的影响。建立在 Tailwind 上的企业完全有能力维护它。

原因 5:Tailwind 在 NPM 趋势上已经超过了 Bootstrap

如果我们根据 NPM 的趋势来看,tailwind 的受欢迎程度已经超过了 Bootstrap。这是 Tailwind 的一大成就,因为 Bootstrap 的历史要长得多,产品也成熟得多。

理由 6:Tailwind 的细粒度控制可让您的用户界面脱颖而出

与 Bootstrap 的组件相比,Tailwind 能让你更好地控制设计的细节,如边框、阴影、明暗控制、透明度等。修改 Bootstrap 按钮要比使用 Tailwind 制作您想要的按钮难得多。

如果您的 UI 设计师真的喜欢让自己的设计独一无二,而不是 "库存",那么 Tailwind 可能是您需要的工具,而不是 Bootstrap。

例如,Tailwind 不会自带按钮、折叠式、警报等用户界面组件。您必须自己构建所有这些组件,或者使用像 Flowbite 这样构建在 Tailwind 之上的更高级别的库。虽然这对于快速构建应用程序的人来说似乎是个缺点,但对于具有一定规模的大公司来说,由于他们的需求更加具体,因此最终必然会这样做。

理由 7:Tailwind 在Web生命周期评分上的表现比 Bootstrap 好得多

众所周知,一个网站如果在 Web Vitals 分数上表现出色,那么它在搜索引擎优化方面的表现也会更好。用户体验也会更好。如果您使用类似灯塔lighthouse的工具来衡量这两种框架的网页性能,Tailwind CSS 通常在开箱即用的情况下表现更好。不过,我们必须注意到,只要使用得当,Bootstrap 也同样会有更好的表现。

与 Bootstrap 相比,Tailwind CSS 有很多优势。不过,工具是否适合工作,最终还是取决于工作和工具本身。如果您正在构建一个性能和自定义比开发速度更重要的应用程序,我认为 Tailwind 会比 Bootstrap 做得更好。但是,如果您正在寻找现成的全站组件或由第三方构建的主题,那么 Tailwind 可能不是您的正确选择。

[原文:https://www.jdon.com/67579.html](URL Here)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/25803.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一百四十六、Xmanager——Xmanager5连接Xshell7并控制服务器桌面

一、目的 由于kettle安装在Linux上&#xff0c;Xshell启动后需要Xmanager。而Xmanager7版本受限、没有免费版&#xff0c;所以就用Xmanager5去连接Xshell7 二、Xmanager5安装包来源 &#xff08;一&#xff09;注册码 注册码&#xff1a;101210-450789-147200 &#xff08…

车载软件架构 —— 闲聊几句AUTOSAR OS(十)

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他人的角度来反对自己。人生在世,最怕的就是把别人的眼光当成自己生活的唯一标…

HTML <section> 标签

实例 文档中的区段&#xff0c;解释了 PRC&#xff1a; <section><h1>PRC</h1><p>The Peoples Republic of China was born in 1949...</p> </section>定义和用法 <section> 标签定义文档中的节&#xff08;section、区段&#x…

【枚举+trie+dfs】CF514 C

Problem - 514C - Codeforces 题意&#xff1a; 思路&#xff1a; 其实是trie上dfs的板题 先把字符串插入到字典树中 对于每次询问&#xff0c;都去字典树上dfs 注意到字符集只有3&#xff0c;因此如果发现有不同的字符&#xff0c;去枚举新的字符 Code&#xff1a; #in…

Excel功能总结

1&#xff09;每一张表格上都打印表头 “页面布局”-->“打印标题”-->页面设置“工作表”页-->打印标题“顶端标题行” 如&#xff1a;固定第1~2行&#xff0c;设置成“$1:$2” 2&#xff09;将页面内容打印在一页【缩印】 1.选好需要打印的区域&#xff0c;“页面布…

AOSP开发——APN配置文件路径

Android1~9&#xff0c;APN配置文件路径&#xff1a; vendor/sprd/telephony-res/apn/apns-conf_8.xml Android10~12&#xff0c;APN配置文件路径&#xff1a; /vendor/sprd/telephony-res/apn/apns-conf_8_v2.xml Android13&#xff0c;APN配置文件路径&#xff1a; /vendor/…

GitHub的基本使用教程

GitHub是一个基于web的版本控制和协作平台。它允许开发人员将他们的代码存储库存储在云中&#xff0c;并与其他人一起进行工作。GitHub还提供了各种工具和功能来帮助开发人员管理和组织他们的代码项目&#xff0c;包括拉出请求、问题跟踪、代码评论等等。此外&#xff0c;它托管…

Android安卓实战项目(8)---自行车fitting计算软件(源码在文末)

Android安卓实战项目&#xff08;8&#xff09;—自行车fitting计算软件&#xff08;源码在文末&#x1f415;&#x1f415;&#x1f415;&#xff09; 【bilibili演示地址】 https://www.bilibili.com/video/BV1eu4y1B7yA/?share_sourcecopy_web&vd_sourceb2e9b9ed746ac…

0101docker mysql8镜像主从复制-运维-mysql

1 概述 主从复制是指将主数据库的DDL和DML操作通过二进制日志传到从库服务器&#xff0c;然后在从库上对这些日志重新执行&#xff08;也叫重做&#xff09;&#xff0c;从而使得从库和主库的数据保持同步。 Mysql支持一台主库同时向多台从库进行复制&#xff0c;从库同时可以…

ubuntu调整路由顺序

Ubuntu系统跳转路由顺序 1、安装ifmetric sudo apt install ifmetric2、查看路由 route -n3、把Iface下面的eth1调到第一位 sudo ifmetric eth1 0命令中eth1是网卡的名称&#xff0c;更改网卡eth1的跃点数&#xff08;metric值&#xff09;为0&#xff08;数值越小&#xf…

读发布!设计与部署稳定的分布式系统(第2版)笔记29_控制层下

1. 配置服务 1.1. 配置服务本身就是分布式数据库 1.1.1. 像ZooKeeper和etcd这样的配置服务 1.1.2. 受CAP定理和亚光速通信的限制 1.1.3. 可实现容量扩展&#xff0c;但不具备资源可伸缩性 1.1.4. 也会遭受相同的网络创伤 1.2. 信息并不仅仅从服务流向客户端实例&#xff…

mysql统计近7天数据量,,按时间戳分组

可以使用以下 SQL 语句来统计近7天的数据量&#xff0c;并按时间戳分组。如果某一天没有数据&#xff0c;则将其填充为0。 SELECT DATE_FORMAT(FROM_UNIXTIME(timestamp), %Y-%m-%d) AS date,COUNT(*) AS count FROM table_name WHERE timestamp > UNIX_TIMESTAMP(DATE_SUB…

JVM技术之旅-有几种情况对象直接进入Old区

推荐资源汇总 自由只存在于束缚之中&#xff0c;没有堤岸&#xff0c;哪里来江河&#xff1f; —— 金斯伯格 JVM的堆内存中分为年轻代与老年代&#xff0c;年轻代又分为Eden区与Survivor区。新对象的创建会分配在年轻代&#xff0c;对象何时进入老年代呢?又有什么样的对象适合…

心电信号时域特征分析与Python实现

目录 1 引言 2 心电信号时域特征的含义 3 Python实现心电信号时域特征提取 4 结论 1 引言 心电信号是由心脏电活动引起的电信号

python调用pytorch的clip模型时报错

使用python调用pytorch中的clip模型时报错&#xff1a;AttributeError: partially initialized module ‘clip’ has no attribute ‘load’ (most likely due to a circular import) 目录 现象解决方案一、查看项目中是否有为clip名的文件二、查看clip是否安装成功 现象 clip…

java读写ini文件

java读写ini文件 1、格式 INI文件由节、键、值组成。 节 [section] 参数 &#xff08;键值&#xff09; namevalue 例&#xff1a; [Total] num1 [Server] ip127.0.0.1 2、代码封装 import org.apache.commons.configuration.ConfigurationException; import org.apache.common…

Linux系统Redis的主从架构配置

Linux系统Redis的主从架构配置 此处基于 Linux系统Redis的单机安装步骤 进行主从架构的搭建 此案例在一台虚拟机上启动6379和6380两个reids实例&#xff1b;6379为主节点&#xff0c;6380为从节点&#xff1b;6380实例会从6379复制数据&#xff1b; 先复制一份单机版的reids.co…

乍得ECTN(BESC)申请流程

根据TCHAD/CHAD乍得法令&#xff0c;自2013年4月1日起&#xff0c;所有运至乍得的货物都必须申请ECTN(BESC)电子货物跟踪单。如果没有申请&#xff0c;将被视为触犯乍得的条例&#xff0c;并在目的地受到严厉惩罚。ECTN是英语ELECTRONIC CARGO TRACKING NOTE的简称&#xff1b;…

基于Java+SpringBoot+Vue的人事管理系统设计与实现(源码+LW+部署文档等)

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…

Ubuntu 传输文件方法

Ubuntu 传输文件方法 文章目录 Ubuntu 传输文件方法1 scpusage跨越跳板机传输 2 rsync&#xff08;remote sync&#xff09;特性installusage本地拷贝同步将文件从远程机器复制到本地机器将文件从本地机器复制到远程机器通过ssh使用rsync 3 SSHFSusage通过 SSHFS 从远程系统访问…