Tailwind Classes 我希望早点知道的

以下是一些我希望早点知道的 Tailwind 类,这些类使我的开发过程更加高效,让我的设计更加精致。

line-clamp

line-clamp 类在处理多行文本截断时非常有用。它允许你控制显示的文本行数,并截断其余部分。这对于创建一致外观的元素(如博客摘要、卡片描述和其他文本密集型组件)特别有用。

<p class="line-clamp-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

c42c889e05357d1f2993d7829f159127.png

更多用法:https://tailwindcss.com/docs/line-clamp

truncate

truncate 类适用于单行文本截断。它确保溢出的文本被替换为省略号,保持布局整洁。

<p class="truncate">This is a very long sentence that will be truncated.
</p>

14838cbebf50f15691cdeef4e4bb0344.png

更多用法:https://tailwindcss.com/docs/text-overflow

size

size 是一个概念,包含了多个控制元素尺寸的 Tailwind 类。像 w-fullh-32max-w-smmin-h-screen 这样的类可以快速设置精确的宽度和高度。

<div class="w-full h-32 bg-gray-200">Full width and fixed height
</div>

更多用法:https://tailwindcss.com/docs/width

divide

divide 类对于在子元素之间添加一致的间距非常有用。在列表或行项目中使用它,可以实现视觉分隔,而无需添加额外的标记。

<ul class="divide-y divide-gray-200"><li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>

ae0efa59d33962c9654c6c08563784c5.png

更多用法 :https://tailwindcss.com/docs/divide-width

space

类似于 dividespace 类帮助管理子元素之间的间距。然而,它添加的是元素之间的边距,非常适合用于 flex 容器或网格。

<div class="space-y-4"><div class="bg-blue-100 p-4">Box 1</div><div class="bg-blue-200 p-4">Box 2</div><div class="bg-blue-300 p-4">Box 3</div>
</div>

d29df08aaa4851d7589db27b719cea84.png

更多用法:https://tailwindcss.com/docs/space

Gradients: from, via, to

Tailwind 的渐变实用工具让你可以轻松创建美丽的渐变背景。使用 fromviato 类,可以定义渐变的起始颜色、中间颜色和结束颜色。

<div class="bg-gradient-to-r from-green-400 via-blue-500 to-purple-600">Gradient background
</div>

c2a474095f062f90c477e4ce1adf9e0f.png

animate

Tailwind 的 animate 类允许你对元素应用预定义的动画。结合@keyframes指令,你可以创建自定义动画。Tailwind 包含一些内置动画,如 animate-bounceanimate-spinanimate-pulse

<div class="animate-bounce">Bouncing element
</div>

更多用法:https://tailwindcss.com/docs/animation

aspect-ratio

aspect-ratio 类帮助你控制元素的纵横比,确保其在不同屏幕尺寸上保持一致的比例。这对于响应式图像和视频特别有用。

<div class="aspect-w-16 aspect-h-9"><iframe class="w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0"></iframe>
</div>

更多用法:https://tailwindcss.com/docs/aspect-ratio

backdrop-filter

backdrop-filter 实用工具允许你对元素后面的区域应用图形效果,如模糊或颜色变换。这可以为模态框、覆盖层等创建惊艳的视觉效果。

<div class="backdrop-filter backdrop-blur-md bg-white bg-opacity-30 p-4">Blurred backdrop content
</div>

更多用法:https://tailwindcss.com/docs/backdrop-blur

ring

ring 实用工具是为元素添加焦点样式和轮廓的绝佳方式。它特别有助于通过使聚焦的元素更具视觉区别来提高可访问性。

<button class="ring-2 ring-blue-500 focus:ring-4 focus:ring-blue-300">Button with ring
</button>

更多用法:https://tailwindcss.com/docs/ring-width

transform

transform 实用工具允许你对元素应用 CSS 变换,如缩放、旋转和平移。结合 transition 实用工具,它可以创建平滑且视觉上吸引人的动画。

<div class="transform hover:scale-105 transition-transform duration-300">Hover to scale
</div>

更多用法:https://tailwindcss.com/docs/transition-property

transition

transition 实用工具让你可以定义属性(如不透明度、颜色和变换)的平滑过渡。这可以通过在 UI 中添加细微的动画来增强用户体验。

<button class="bg-blue-500 hover:bg-blue-700 transition-colors duration-300">Hover to change color
</button>

更多用法: https://tailwindcss.com/docs/transition-property

结论

Tailwind CSS 是前端开发人员的强大工具,这些类只是冰山一角。通过将这些实用工具融入你的工作流程中,你可以简化开发过程,并创建更动态、更具视觉吸引力的网页设计。如果你还没有尝试过这些类,请尝试一下,看看它们如何提升你的下一个项目。

最后:

vue2与vue3技巧合集

VueUse源码解读

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

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

相关文章

抖音 UG 社招一面算法原题

史上最严热点新机制 或许是受到前段时间「巴黎丢作业」的影响&#xff0c;抖音近日&#xff08;5月27日&#xff09;实施了新的热点内容核实机制。 具体来说&#xff0c;若用户在抖音以热点事件当事人身份发声&#xff0c;抖音将联系当事人进行身份认证。 逾期未认证的用户&…

Flutter开发效率提升1000%,Flutter Quick教程之在特定位置插入Widget

当我们要将Widget插入一个Column,Row或者Listview等有多个子元素的Widget的时候&#xff0c;有两种情况&#xff0c;一种是顺序插入&#xff0c;一种是非顺序插入。顺序插入就是Widget的排列顺序和插入顺序相同&#xff0c;非顺序插入则不是。 一&#xff0c;顺序插入。如图所…

微信小程序播放音频

微信小程序是一种轻量化、便捷的应用程序&#xff0c;让用户可以直接在微信内享受各种服务。其中&#xff0c;播放音频是微信小程序中非常常见的功能之一。在本文中&#xff0c;我们将详细讲解如何在微信小程序中播放音频。 第一步&#xff0c;准备音频文件 在开始使用微信小程…

Vue进阶之Vue无代码可视化项目(三)

Vue无代码可视化项目 项目初始化store的使用DataSourceView.vuestores/counter.ts开发模式按钮store/editor.tsLayoutView.vue导航条安装图标iconpackage.jsonstore/debug.tssrc/components/AppNavigator.vueAppNavigator.ts:AppNavigator.vue:theme样式theme/reset.csstheme/v…

重庆耶非凡科技有限公司的选品师项目加盟靠谱吗?

在当今电子商务的浪潮中&#xff0c;选品师的角色愈发重要。而重庆耶非凡科技有限公司以其独特的选品师项目&#xff0c;在行业内引起了广泛关注。对于想要加盟该项目的人来说&#xff0c;项目的靠谱性无疑是首要考虑的问题。 首先&#xff0c;我们来看看耶非凡科技有限公司的背…

【SpringMVC】_设置响应状态码与Header

目录 1. 设置响应状态码 2. 设置响应Header 2.1 设置Content-Type 2.1.1 不使用RequestMapping的produce属性 2.1.2 使用RequestMapping的produce属性 2.2 设置/新增其他Header 1. 设置响应状态码 Spring是基于servlet实现的&#xff0c;设置HTTP响应的状态码可以通过se…

521源码-源码下载-WordPress报错:Allowed memory size of 134217728 bytes exhausted错误解决方法

在wordpress中使用站内搜索或者打开一个页面时提示错误&#xff1a; Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 20480 bytes) 致命错误:允许耗尽内存大小为134217728字节(试图分配20480字节) 分析&#xff1a;经过检查发现&#x…

【Ubuntu】【Shell】执行sh脚本报错“xxx.sh:/bin/bash^M:解释器错误: 没有那个文件或目录“

背景 在自己Ubuntu环境执行sh脚本&#xff0c;报错"xxx.sh&#xff1a;/bin/bash^M&#xff1a;解释器错误: 没有那个文件或目录"&#xff0c;查了下是Ubuntu系统默认的shell是dash: 修改配置过下&#xff0c;变成bash 解决方案 在终端执行&#xff1a; sudo dp…

YOLOv8 深度详解!一文看懂,快速上手

YOLOv8 深度详解&#xff01;一文看懂&#xff0c;快速上手 原文&#xff1a;YOLOv8 深度详解&#xff01;一文看懂&#xff0c;快速上手 - 知乎 (zhihu.com) YOLOv8 是 ultralytics 公司在 2023 年 1月 10 号开源的 YOLOv5 的下一个重大更新版本&#xff0c;目前支持图像分类…

处理一对多的映射关系

一对多关系&#xff0c;比如说根据id查询一个部门的部门信息及部门下的员工信息 在Dept类中先添加List emps属性 1、collection DeptMapper.xml文件中 <resultMap id"deptAndEmpResultMap" type"Dept"><id property"did" column&qu…

2024新算法红嘴蓝鹊优化算法,原理详解,MATLAB代码免费获取

红嘴蓝鹊优化算法&#xff08;Red-billed blue magpie optimizer&#xff0c;RBMO&#xff09;是一种受自然启发的群智能优化算法。该算法的灵感来自红嘴蓝鹊的合作和有效的捕食行为。通过对红嘴蓝鹊的搜索、追逐、攻击和食物储存行为的模拟&#xff0c;建立了RBMO的数学模型。…

牛客网刷题 | BC113 数字三角形

目前主要分为三个专栏&#xff0c;后续还会添加&#xff1a; 专栏如下&#xff1a; C语言刷题解析 C语言系列文章 我的成长经历 感谢阅读&#xff01; 初来乍到&#xff0c;如有错误请指出&#xff0c;感谢&#xff01; 描述 KiKi学习了循环&am…

华为手机开启adb的调试模式方法

1. 在设置->系统->关于手机&#xff0c;连续按几次"版本号" (注意: 在学生模式下不能使用) 2. 退到上一层&#xff0c;出现“开发人员选项”&#xff08;与“关于手机”并列&#xff09; 3. 选中“开发者选项”&#xff0c;选中“仅充电模式下允许ADB调式”&…

如何配置AI参数SK接口

如何配置AI参数SK接口 1、选择AI接口 接口选择&#xff1a;多个ai接口选择 百度文心一言&#xff1a;国内百度接口 第三方平台&#xff0c;无需自备GPT账号&#xff0c;无需反向代理&#xff0c;建议每次充值不要太多&#xff0c;不知道会不会关停跑路 自定义接口&#xff1a;…

牛客网刷题 | BC110 X形图案

目前主要分为三个专栏&#xff0c;后续还会添加&#xff1a; 专栏如下&#xff1a; C语言刷题解析 C语言系列文章 我的成长经历 感谢阅读&#xff01; 初来乍到&#xff0c;如有错误请指出&#xff0c;感谢&#xff01; 描述 KiKi学习了循环&am…

React Query:高效管理API请求与缓存

React Query 是一个强大的状态管理库&#xff0c;专门用于处理数据获取、缓存和更新&#xff0c;尤其适合与 API 交互。它提供了许多高级特性&#xff0c;如自动缓存、离线状态管理、数据过期和重新获取等。 安装&#xff1a; npm install react-query导入并配置 React Query&…

RUST宏编程入门

宏指示符 在Rust的宏编程中&#xff0c;宏可以接受多种类型的参数&#xff0c;称为“指示符”。这些指示符帮助宏识别不同类型的代码片段&#xff0c;并相应地处理它们。 这里列出全部指示符&#xff1a; blockexpr 用于表达式ident 用于变量名或函数名itemliteral 用于字面常…

Internet Download Manager (IDM) 的优势

Internet Download Manager (IDM) 的优势 Internet Download Manager (IDM) 是一款流行的下载管理器&#xff0c;广泛用于加速和管理文件下载。以下是 IDM 的主要优势&#xff1a; 1. 下载加速 多线程下载&#xff1a;IDM 使用多线程技术&#xff0c;将下载的文件分成多个部…

【算法】合并两个有序链表(easy)——递归算法

题解&#xff1a;合并两个有序链表(easy)——递归求解 目录 1.题目2.题解3.参考代码4.总结 1.题目 题目链接&#xff1a;LINK 2.题解 本题有两种解法&#xff0c; 一是用循环去处理 链接&#xff1a;【刷题记录】合并两个有序数组、移除元素二是用递归去处理 将在下面中说…

【面试题-005】Java中的类加载机制有哪些

文章目录 Java中的类加载器有哪些什么是双亲委派模型 Java中的类加载器有哪些 Java中的类加载机制是指Java虚拟机&#xff08;JVM&#xff09;将类文件&#xff08;.class文件&#xff09;加载到内存中&#xff0c;并对类进行解释和初始化的过程。类加载机制包括加载、链接&am…