Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >分享 6 个你需要使用 Tailwind CSS 的原因

分享 6 个你需要使用 Tailwind CSS 的原因

作者头像
前端达人
发布于 2023-08-31 00:42:37
发布于 2023-08-31 00:42:37
62500
代码可运行
举报
文章被收录于专栏:前端达人前端达人
运行总次数:0
代码可运行
Tailwind CSS因其在构建用户界面(UI)方面的独特方法而在Web开发社区中获得了显着的流行。这个实用优先的CSS框架提供了许多优势,使它成为开发者强大的工具。在本文中,我们将探索6个令人信服的理由,解释为什么您应该考虑在下一个项目中使用Tailwind CSS。

1、快速的内联响应式设计

过去,我们需要编写复杂的媒体查询来使我们的界面具备响应式能力。但是使用Tailwind CSS,实现响应式设计就像给HTML元素添加类一样简单。您可以直接在类属性中指定响应式的行为,而无需在单独的CSS文件中定义媒体查询。

例如,假设您想根据不同的屏幕尺寸改变文本的字体大小。在Tailwind CSS中,您可以通过直接向元素添加响应式文本类,如text-lg、text-sm或text-xl来实现:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<span class="lg:text-lg sm:text-sm xl:text-xl">Hello, world!</span>

这种内联的响应式设计方法节省了时间,并消除了编写和管理复杂媒体查询的需要。

2、内联伪类实现交互效果

Tailwind CSS允许您直接在类属性中应用伪类。伪类使您能够向UI组件添加交互性和动态行为。例如,如果您希望在鼠标悬停时更改元素的文本颜色,只需添加hover:text-blue-500类:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<span class="text-4xl hover:text-blue-500">Hello, world!</span>

Tailwind CSS提供了一系列伪类,例如focus、active等,让您可以轻松地为UI添加交互功能,而无需编写自定义的CSS规则。

3、内联样式的简洁性

使用Tailwind CSS的一个重要优势是能够直接在元素内部定义其所有样式。这种方法消除了在多个CSS文件中搜索以了解元素样式的需求。

通过查看元素的HTML标记,您可以立即看到其对应的样式。例如,考虑下面创建一个样式化卡片组件的代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="rounded bg-gray-500 p-4">I'm a card!</div>

在这个示例中,卡片的样式是自包含的,使得理解和维护代码库变得更加容易。使用Tailwind CSS,您可以避免为样式目的而创建单独的文件,从而实现更流畅的开发工作流程。

4、组件化的方法提高可重用性

在使用Tailwind CSS时,您可能会发现自己不断地应用一组类。为了避免代码重复,Tailwind CSS允许您使用@apply指令创建自定义样式类。

例如,假设您经常使用一组类来创建卡片样式的组件。您可以定义一个名为.card的自定义类,并在需要的地方应用它,而不是每次都重复相同的类。以下是一个示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.card {
  @apply rounded bg-gray-300 p-4;
}

现在,您可以将.card类直接应用于需要指定样式的任何元素上。这种基于组件的方法提高了代码的可重用性和可维护性,特别是在使用React或Vue等框架时。

5、定制化满足个性化设计需求

Tailwind CSS提供了广泛的定制选项,让您可以根据特定的设计需求定制框架。默认情况下,Tailwind提供了一套全面的配置选项,包括颜色、尺寸单位、响应式断点和其他样式选择。但是,如果默认配置不符合您项目的需求,您可以灵活地进行定制。

您可以通过修改Tailwind CSS配置文件轻松覆盖默认值并添加新的配置项。该文件提供了一个集中化的位置,用于自定义颜色、间距、字体、断点等等。通过调整这些设置,您可以创建一个定制化的设计系统,与您项目的品牌和样式指南完美契合。

Tailwind CSS的定制能力确保您对UI的视觉方面拥有完全的控制权,使其成为具有独特设计需求的项目的多功能选择。

6、使用Purge实现高效的生产构建

使用实用类的潜在问题之一是可能会导致生成一个包含在项目中未使用的样式的庞大CSS文件。这可能会导致不必要的冗余,并影响页面加载时间。

Tailwind CSS通过内置的未使用样式清除功能提供了解决方案。清除操作会分析项目的HTML或JSX文件,以确定实际使用的类,并从最终的生产构建中删除未使用的样式。

要启用清除功能,您需要在配置文件中指定Tailwind CSS应该扫描哪些文件以查找使用的类。例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// tailwind.config.js
module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.jsx',
  ],
  // other configuration options
};

通过设置purge属性并提供相关文件路径,Tailwind CSS将智能地删除未使用的样式,从而生成一个精简且优化的生产构建。

这种清除机制确保您的应用程序只包含必要的CSS,减小文件大小并提高性能。它使您能够充分利用Tailwind CSS的实用类的优势,而无需在生产环境中牺牲性能。

总结

总结起来,我相信在您的下一个项目中尝试使用Tailwind CSS绝对是值得的。对于这个问题,我认为Tailwind CSS提供了一种强大而灵活的方式来构建现代、响应式和可定制的用户界面。它的内联样式和组件化的方法使得开发更加简单、快速和可维护。同时,Tailwind CSS的定制能力和清除未使用样式的功能进一步增强了其实用性和生产效率。我鼓励您在下一个项目中尝试使用Tailwind CSS,并亲自体验其所带来的优势。

原文: https://levelup.gitconnected.com/6-reasons-why-you-should-start-using-tailwind-css-5dbc72715743 作者:Stephanie Zhan 非直接翻译,有自行改编和添加部分,翻译水平有限,难免有疏漏,欢迎指正

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2023-06-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端达人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Qt音视频开发43-人脸识别服务端
上一篇文章写道人脸识别客户端程序,当然要对应一个服务端程序,客户端才能正常运行,毕竟客户端程序需要与服务端程序进行交互他才能正常工作。通常人脸识别服务端程序需要和人脸识别的相关处理库在一起,这样他接收到相关的处理需求以后比如人脸识别的处理请求,需要调用本地的人脸识别库来处理,处理完成以后拿到结果,再组成协议的格式返回给客户端程序。
feiyangqingyun
2020/10/30
8810
Qt音视频开发43-人脸识别服务端
Qt音视频开发39-人脸识别在线版
关于人脸识别这块,前些年不要太火,哪怕是到了今天依然火的一塌糊涂,什么玩意都要跟人脸识别搭个边,这东西应该只是人工智能的一个很小的部分,人脸识别光从字面上理解就是识别出人脸区域,其实背后真正的处理是拿到人脸区域图片,提取人脸特征值,再用这些特征值去做比对分析处理,识别出到底是谁,国内厂家也不少,比拼的就是准确度误报率,速度无非就是靠堆硬件来,什么VPU各种并行运算都堆上去,速度杠杠的,好多厂家都做到了几个毫秒的级别,估计很多厂家都是在开源的基础上加上了自家的算法,一直跑呀跑的整出了符合自家算法的人脸模型文件,比如百度的人脸识别模型文件,经过好几年的发展,越来越大越来越细越来越准。
feiyangqingyun
2020/10/26
1.8K0
Qt音视频开发39-人脸识别在线版
Qt音视频开发45-视频传输TCP版
做音视频开发,会遇到将音视频重新转发出去的需求,当然终极大法是推流转发,还有一些简单的场景是直接自定义协议将视频传出去就行,局域网的话速度还是不错的。很多年前就做过类似的项目,无非就是将本地的图片上传到服务器,就这么简单,其实用http的post上传比较简单容易,无需自定义协议,直接设置好二进制数据即可,而采用TCP或者UDP通信的话,必须自定义协议,因为不知道什么时候数据接收完了是完整的图片数据,可能同时在发送很多图片数据,而且还不能区分收到的图片是哪个客户端发来的,TCP长连接的话,还需要有心跳来检测连接,所以必须自定义一套协议来支撑通信,这套协议采用的是上海监管平台的通信协议格式,拓展性比较强,其中头部信息包括了类型+当前完整包的数据长度,这个类型就是通信协议的标识,这样下次来一个其他类型的比如楼宇对讲可以叫IDOOR,服务端根据这个标识就能知道采用何种解析算法来处理后面的数据,而当前完整包的数据长度可以用来处理收到的数据,只有该长度的数据才表示接收完成一个完整的图片数据,再去解码处理。当传输的图片到了一定速度的时候比如一秒钟传输20张图片,其实就相当于传输视频了,一般人的肉眼看到一秒钟20张图片基本上认识就是视频了。
feiyangqingyun
2020/11/03
1.3K0
Qt音视频开发45-视频传输TCP版
Qt音视频开发40-人脸识别离线版
上一篇文章写了在线调用人脸识别api进行处理,其实很多的客户需求是要求离线使用的,尤其是一些事业单位,严禁这些刷脸数据外泄上传到服务器,尽管各个厂家号称严格保密这些数据,但要阻止这些担心,唯一的解决办法就是设备离线使用,连个屁的网,不联网看你怎么上传,于是离线的人脸识别应用应运而生,比如我们手机上的识别就是本地库在运算,至于本地模型库估计会联网更新,以保持最新的状态。百度的离线人脸识别做的还行,看官网的sdk开发包,更新也是蛮快的,提供了windows、linux、android等版本。
feiyangqingyun
2020/10/27
1.1K0
Qt音视频开发40-人脸识别离线版
Qt音视频开发46-视频传输UDP版
上篇文章写道采用的TCP传输视频,优缺点很明显,优点就是不丢包,缺点就是速度慢,后面换成UDP通信,速度快了很多,少了3次握手,而且在局域网中基本上不丢包,就算偶尔丢包,对于一秒钟25-30张图片来说,偶尔一张图片丢失,基本上看不出来,所以忽略,但是放到广域网或者互联网比如阿里云平台上测试的话,UDP惨不忍睹,丢包蛮多的,毕竟包数据特别多。
feiyangqingyun
2020/11/04
1.2K0
Qt音视频开发46-视频传输UDP版
Qt音视频开发41-人脸识别嵌入式
大概几年前搞过一套嵌入式linux上的人脸识别程序,当然人脸识别的核心算法并不是自己开发的,关于人脸识别算法这一块,虽然有众多的开源库可以用,甚至还可以用opencv搞算法训练深度学习之类的,个人认为始终达不到准确度的要求,尤其是人脸比对的准确度,这个需要专业的人脸训练模型才行。目前市面上绝大部分的人脸识别库提供的都是X86的或者安卓ios的库,并没有嵌入式linux的库,估计一方面因为嵌入式linux跑的板子性能比较低,还有一个就是依赖特定编译器,版本众多难以提供,市场也小,所以大部分的厂家都没有提供嵌入式linux的开发包,这个就比较鸡肋,所以很多终端厂家最终弃用linux而选用安卓作为载体系统,这样就可以用上高大上的人脸识别库了,比如萤火虫开发板,RK3288 RK3399等。
feiyangqingyun
2020/10/28
1.1K0
Qt音视频开发41-人脸识别嵌入式
Qt音视频开发34-Onvif时间设置
对设备设置时间很有必要,这个是必备的功能,毕竟大部分的前端设备比如摄像机本身不带BIOS电池的,所以没法存储时间,要么设置了NTP地址来同步时间,要么其他设备主动对他进行设置时间,如果时间不正确了,意味着本地画面显示的时间字符串,本地存储的视频录像文件等,都可能是不正确的,所以一般的处理是NVR一旦连上摄像机设备以后,立马将摄像机的时间设置成NVR的时间,这样就保持了一致。
feiyangqingyun
2020/10/14
1.2K0
Qt音视频开发34-Onvif时间设置
Qt音视频开发33-ffmpeg安卓版
一直都想搞个安卓版本的视频监控程序,很早以前弄过一个,采用的是早期的ffmpeg2的lib文件,对于现在众多的网络流媒体格式,支持有限,而且新的Qt编写安卓程序,结构上也变动了,新的安卓系统权限要求也和以前处理不一样了,现在需要动态授权,以前是直接配置文件写好需要哪些权限就行,所以近期特意全部重写了一遍安卓版本的视频监控程序,内核还是采用的ffmpeg,换成了最新的ffmpeg4版本,在ubuntu系统上用安卓编译器编译了对应的lib文件,然后放到win上编写Qt+安卓程序。
feiyangqingyun
2020/10/13
9630
Qt音视频开发33-ffmpeg安卓版
Qt音视频开发31-Onvif抓拍图片
抓拍是个很重要的功能,比如在报警视频联动中需要一张实时的图片,很多SDK不提供抓拍功能,而通过预览抓图,得到的图片已不具有实时性,那如何得到实时的图片呢?现在的IPC基本上都支持ONVIF协议,ONVIF协议除了提供RTSP的URL外,其实也给出了抓拍的URL,从Media的GetSnapshotUri获取。
feiyangqingyun
2020/10/10
1.4K0
Qt音视频开发31-Onvif抓拍图片
Qt音视频开发27-Onvif设备搜索
最近业余时间主要研究音视频开发这块,前面的文章写了好多种视频监控内核,一旦将这些内核搞定以后,视频监控的相关功能水到渠成。做视频监控系统,绕不过onvif这玩意,这玩意主要就是为了统一一个大概的标准,能够对各个厂家的监控设备进行常用的一些操作,比如搜索、获取信息、云台控制、事件订阅、抓拍图片等,如果没有这个规范,那么各个厂家都各自为政,需要用私有的sdk去处理,这样就很麻烦很惨了,几十个厂家就需要几十个sdk,对于程序员来说简直是灾难,想想就很恐怖的事情,哪个程序员不想多活几年!
feiyangqingyun
2020/10/04
1.1K0
Qt音视频开发27-Onvif设备搜索
Qt音视频开发44-实时人脸框
在人脸识别到以后,需要在实时视频上将所有人脸框绘制出来,一把来说识别人脸会有多种选择,一个是识别最大人脸,这种场景主要用于刷脸门禁,还有一种是识别所有人脸,这种场景主要用于人脸识别摄像机,就是将画面中的所有人脸识别出来发给服务器,人脸框的数据主要是四个参数,左上角和右下角的位置,也可以说是x、y、width、height,可能有些做的比较好的还有倾斜角度,这个意义不是很大,人脸识别的速度一般都是飞快的,就算你用学习上用的opencv做识别也是非常快的,基本上都是毫秒级的响应,主要的耗时操作在特征值的提取,所以一般要求能够响应每个通道每秒钟25帧-30帧的画面绘制+人脸框的绘制,当然人脸框的数据可能会有多个。
feiyangqingyun
2020/11/01
1.3K0
Qt音视频开发44-实时人脸框
Qt音视频开发38-USB摄像头解码linux方案
做嵌入式linux上的开发很多年了,扳手指头算算,也起码9年了,陆陆续续做过很过诸如需要读取外接的USB摄像头或者CMOS摄像机的程序,实时采集视频,将图像传到前端,或者对图像进行人脸分析处理,最开始尝试的就是QCamera来处理,直接歇菜放弃,后面通过搜索发现都说要用v4l2视频框架来进行,于是东搞搞西搞搞尝试了很多次,终于整出来了,前后完善了好几年,无论写什么程序,发现要简简单单的实现基础的功能,都是非常快速而且容易的,但是想要做得好做得精,要花不少的精力时间去完善,适应各种不同的场景,比如就说用v4l2加载摄像头这个,需要指定设备文件来读取,而现场不可能让用户来给你指定,频繁的拔插也会导致设备文件名的改动,所以必须找到一个机制自动寻找你想要的摄像机的设备文件名称,比如开个定时器去调用linux命令来处理,甚至在不同的系统平台上要执行的命令还有些许的区别,如果本地有多个摄像头还需要区分左右之类的时候,那就只能通过断电先后上电顺序次序来区分了。
feiyangqingyun
2020/10/21
2.9K0
Qt音视频开发38-USB摄像头解码linux方案
QT应用编程:基于QT+HTTP协议设计的屏幕共享软件(只要有浏览器就可以访问)
QT版本: 5.12.6 操作系统: win10 64位 软件下载地址 完整源码下载:https://download.csdn.net/download/xiaolong1126626497/19354865
DS小龙哥
2022/01/07
2.1K0
QT应用编程:基于QT+HTTP协议设计的屏幕共享软件(只要有浏览器就可以访问)
Qt音视频开发32-Onvif网络设置
用onvif协议来对设备的网络信息进行获取和设置,这个操作在众多的NVR产品中,用的很少,绝大部分用户都还是习惯直接通过摄像机的web页面进去配置,其实修改网络配置的功能在大部分的NVR中都是具备的,网络的参数主要包括IP地址、子网掩码、网关地址、DNS解析地址、NTP地址、网卡信息、网络协议等,这些都可以通过不同的onvif命令来获取和设置,一直没有搞懂为啥这些要分开不同的命令去处理,其实大可以合并成一个命令嘛,搞得设置个网络信息还要post好多次的数据才行。
feiyangqingyun
2020/10/12
1.1K0
Qt音视频开发32-Onvif网络设置
Qt音视频开发3-vlc录像存储
录像功能是视频监控系统的常用功能,就是将打开的视频流或者视频文件重新保存成MP4文件,当然也可以保存成其他格式,一般默认用MP4比较好,比较标准一些,MP4格式的兼容性最好,基本上没有说那台电脑不能播放MP4文件,所以就保存成这种最常用的视频文件格式就好了。
feiyangqingyun
2020/08/05
1.2K0
Qt音视频开发3-vlc录像存储
Qt音视频开发47-通用视频控件
自从视频监控系统的内核不断增加,从最初的vlc到ffmpeg然后到mpv,后面还陆续增加了海康sdk等,每次增加一个内核,整个视频监控系统就有三五个代码文件需要修改,而且大部分是重复的代码,通过define来区分不同的内核,所以重新整理了一个视频类,里面就define处理好了,提供了个公共接口,在需要的地方直接实例化一个类就行,而不需要在不同的地方实例化不同的类,大大减轻了后期的工作量,也复用了很多代码。
feiyangqingyun
2020/11/18
1.3K0
Qt音视频开发47-通用视频控件
Qt音视频开发35-Onvif图片参数
视频中的图片的配置参数一般有亮度、饱和度、对比度、锐度等,以前一直以为这些需要通过厂家的私有协议SDK来设置才行,后面通过研究Onvif Device Manager 和 Onvif Device Test Tool 这两个onvif开发的必备工具以后,发现onvif协议也具备了修改 亮度、色彩度、饱和度这三个参数,当然这三个参数我见过的摄像机厂家(主流的十几种)都具备,还有些大厂做的设备还提供了其他详细图片参数的设置比如ICAT。
feiyangqingyun
2020/10/16
9710
Qt音视频开发35-Onvif图片参数
Qt音视频开发48-通用通道管理
把通用的视频控件搞定以后,后期增加新的内核方便多了,不需要在好多个文件复制粘贴之类的,接下来就是需要一个统一的类来管理视频监控系统中的16个通道或者32个通道,甚至64个通道也有可能,当然,通用通道管理也兼容各种监控内核,以前通道管理类,是每个内核写一个,也是很繁琐,大量的重复性代码,所以将通用视频监控控件整理好以后,顺其自然的要改造这个通用通道管理的类了。
feiyangqingyun
2020/11/20
8600
Qt音视频开发48-通用通道管理
Qt音视频开发11-ffmpeg常用命令
大部分的格式转换工具比如格式化工厂等,都用到了ffmpeg来处理,ffmpeg编译后生成的ffmpeg.exe、ffplay.exe、ffprobe.exe等可执行文件,其实就封装了众多牛逼的功能,ffprobe查看媒体文件头信息的工具,ffplay用于播放媒体文件的工具,尤其是ffmpeg.exe,强大的媒体文件转换工具,可以转换任何媒体文件,还可以用自己的 AudioFilter 以及 VideoFliter 进行处理和编辑,比如下面的一些功能。
feiyangqingyun
2020/08/16
1.3K0
Qt音视频开发11-ffmpeg常用命令
Qt音视频开发30-Onvif事件订阅
能够接收摄像机的报警事件,比如几乎所有的摄像机后面会增加报警输入输出接口,如果用户外接了报警输入,则当触发报警以后,对应的事件也会通过onvif传出去,这样就相当于兼容了所有onvif摄像机厂家的报警事件接收,在一些应用系统中,这个功能也是很常见的。接收摄像机的报警信息一般有两种处理方式,一种是订阅,订阅以后摄像机会在请求后一直阻塞等待,如果有新的报警信息则立即返回,否则需要到超时时间才会断开连接请求;还有一种是定时器主动轮询,不断的去询问是否有新的报警事件。关于订阅要阻塞等待的问题,这就涉及到另一个问题,一般Qt默认的并发请求最大6个(貌似这玩意好多浏览器也是这个规约,不知为何这么限定,为了节约系统资源?)这就意味着订阅机制下,最大只能有6个摄像机的报警事件订阅存在,超过就不行,除非有空闲的连接请求断开了,所以很多开发者会选择用其他的http post工具比如curl去处理。
feiyangqingyun
2020/10/09
1.2K0
Qt音视频开发30-Onvif事件订阅
推荐阅读
相关推荐
Qt音视频开发43-人脸识别服务端
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验