Tailwind CSS常见组合用法

1、一般布局组合

    <main className="flex min-h-screen flex-col items-center justify-between p-24"></main>
flex将元素的显示类型设置为 flexbox。这意味着子元素将以 flex 项的方式排列。
min-h-screen将元素的最小高度设置为全屏高度(视口高度)。这意味着该元素的最小高度将与浏览器窗口的高度相等。
flex-col将 flex 容器的主轴方向设置为垂直方向,即子元素将按列排列。
items-center设置弹性容器的交叉轴对齐方式为居中,这就意味着子元素在交叉轴(在这种情况下为水平轴)上会被居中对齐。
justify-between在主轴方向(垂直方向)上,子元素之间的空间会被均匀分配,首尾元素会分别对齐到容器的顶部和底部。
p-24设置元素的内边距,p-24 表示四个方向的内边距都为 6rem(

综合起来,这些类一起使用时,形成一个最小高度为全屏、垂直排布、子元素居中并且相互之间有一定间距的布局。这种布局方式适合需要响应式设计和灵活排列的场景,常用于创建首页、中心内容区域或其他需要对齐的组件。

对比 flex-col 和 flex-row。可以记住:
flex-row:元素像行(横向)排列,可以联想成一排排座椅。
flex-col:元素像列(纵向)排列,可以联想成梯子。

2、text-{size} 类用于设置文本的大小

类名描述大小
text-xs极小字体大约 0.75rem(12px)
text-sm小字体大约 0.875rem(14px)
text-base基础字体通常是 1rem(16px)
text-lg大字体大约 1.125rem(18px)
text-xl更大字体大约 1.25rem(20px)
text-2xl非常大字体大约 1.5rem(24px)
text-3xl巨型字体大约 1.875rem(30px)
text-4xl超大字体大约 2.25rem(36px)
text-5xl超巨型字体大约 3rem(48px)
text-6xl极巨型字体大约 3.75rem(60px)
text-7xl超级巨型字体大约 4.5rem(72px)
text-8xl无敌巨型字体大约 6rem(96px)
text-9xl至尊巨型字体大约 8rem(128px)

3、 text-{color} 类用于设置文本的颜色

4、组合样式

<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 m-3 rounded" type="submit"> 提交</button>
类名含义
bg-blue-500设置按钮的背景色为蓝色(500阶梯)。
hover:bg-blue-700鼠标悬停时,将按钮的背景色变为蓝色(700阶梯),提供交互反馈。
text-white设置按钮文本颜色为白色,以确保在蓝色背景上清晰可读。
font-bold将按钮的字体设置为加粗,使得文本更加醒目。
py-2设置按钮上下内边距(padding)为 0.5rem(8px),增加按钮的高度。
px-4设置按钮左右内边距(padding)为 1rem(16px),增加按钮的宽度。
m-3设置按钮的外边距(margin)为 0.75rem(12px),使按钮与周围元素有间隔。
rounded为按钮添加圆角效果,使其角部有一定的圆润度。
type="submit"指定按钮的类型为“提交”按钮,在表单中使用,点击将提交包含的表单。
效果

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

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

相关文章

【Powershell】超越限制:获取Azure AD登录日志

你是否正在寻找一种方法来追踪 Azure Active Directory&#xff08;Azure AD&#xff09;中用户的登录活动&#xff1f; 如果是的话&#xff0c;查看Azure AD用户登录日志最简单的方法是使用Microsoft Entra管理中心。打开 https://entra.microsoft.com/&#xff0c;然后进入 监…

CentOS 7开启SSH连接

1. 安装openssh-server 1.1 检查是否安装openssh-server服务 yum list installed | grep openssh-server如果有显示内容&#xff0c;则已安装跳过安装步骤&#xff0c;否则进行第2步 1.2 安装openssh-server yum install openssh-server2. 开启SSH 22监听端口 2.1 打开ssh…

对零拷贝技术的思考过程

名词 CPU拷贝&#xff1a;将内核缓存区的数据拷贝到用户缓存区DMA拷贝&#xff1a;将外设上的数据拷贝到内核缓存区系统调用&#xff1a;应用程序调用操作系统的接口上下文切换&#xff1a;用户态和内核态&#xff0c;应用调用操作系统的接口&#xff0c;操作系统调用CPU内核工…

每天都在用的20个Python技巧,让你从此告别平庸!

今天我将向大家分享日常工作中常用的20个Python技巧&#xff0c;小巧而优雅&#xff0c;让你的代码更加 Pythonic&#x1f44d; 目录 Tip1&#xff1a;单行代码实现变量值交换 Tip2&#xff1a;序列反转很简单 Tip3&#xff1a;字符串乘法 Tip4&#xff1a;单行代码实现条…

RFID(NFC) CLRC663非接触读取芯片GD32/STM32 SPI读取

文章目录 基本介绍硬件配置连接硬件连接详解程序代码代码解释 基本介绍 CLRC663 是高度集成的收发器芯片&#xff0c;用于 13.56 兆赫兹的非接触式通讯。CLRC663 收发器芯片支 持下列操作模式 • 读写模式支持 ISO/IEC 14443A/MIFARE • 读写模式支持 SO/IEC 14443IB • JIS X…

打破误解:走近轻度自闭症患者的真实生活

在自闭症的广阔光谱中&#xff0c;轻度自闭症是一个相对温和但又不可忽视的存在。它像是一层薄薄的雾&#xff0c;轻轻笼罩在患者的世界里&#xff0c;既不影响他们基本的生存能力&#xff0c;又在一定程度上影响着他们的社交互动、情感表达及兴趣范围。 轻度自闭症患者往往能…

【Android】Android模拟器抓包配置

从Android7.0之后开始&#xff0c;用户自行安装的证书在用户目录下&#xff0c;无法进行证书信任&#xff0c;导致Charles无法进行https抓包 方案&#xff1a; 1. 获取手机root权限 有些模拟器可以直接开启root权限&#xff1b; 有些Android手机可以直接开启root权限。 2. …

【ai】学习笔记:电影推荐1:协同过滤 TF-DF 余弦相似性

2020年之前都是用协同过滤2020年以后用深度学习、人工智能视频收费的,不完整,里面是电影推荐 这里有个视频讲解2016年大神分析了电影推荐 :MovieRecommendation github地址 看起来是基于用户的相似性和物品的相似性,向用户推荐物品: 大神的介绍: 大神的介绍: 基于Pytho…

Python3 基础语法快速入门

目录&#xff1a; 一、概述二、运行1、终端启动 Python3 交互式解释器直接执行&#xff1a;2、.py 文件运行&#xff1a;3、可执行文件运行&#xff1a; 三、基础语法1、Python 中文编码&#xff1a;2、注释&#xff1a;3、print 输出&#xff1a;4、变量赋值&#xff1a;5、行…

tcp协议下的socket函数

目录 1.socket函数 2.地址转换函数 1.字符串转in_addr的函数:​编辑 2.in_addr转字符串的函数&#xff1a;​编辑 1.关于inet_ntoa函数 3.listen函数 4.简单的Server模型 1.初步模型 1.sock函数和accept函数返回值的sockfd的区别 2.运行结果和127.0.0.1的意义 2.单进…

【游戏/社交】BFS算法评价用户核心程度or人群扩量(基于SparkGraphX)

【游戏/社交】BFS算法评价用户核心程度or人群扩量&#xff08;基于SparkGraphX&#xff09; 在游戏和社交网络领域&#xff0c;评估用户的核心程度或进行人群扩量是提升用户粘性和拓展社交圈的关键。广度优先搜索&#xff08;BFS&#xff09;算法以其在图结构中评估节点重要性…

[C/C++入门][变量和运算]9、数据类型以及占用存储空间大小

我们都知道&#xff0c;C中包含了多种数据类型 数据类型占用字节数中文名称注释char1字符型存储单个字符&#xff0c;通常为8位。signed char1有符号字符型字符型的有符号版本&#xff0c;可用于表示-128至127之间的整数。unsigned char1无符号字符型字符型的无符号版本&#…

SpringAI简单使用(本地模型+自定义知识库)

Ollama 简介 Ollama是一个开源的大型语言模型服务工具&#xff0c;它允许用户在本地机器上构建和运行语言模型&#xff0c;提供了一个简单易用的API来创建、运行和管理模型&#xff0c;同时还提供了丰富的预构建模型库&#xff0c;这些模型可以轻松地应用在多种应用场景中。O…

arm 内联汇编基础

一、 Arm架构寄存器体系熟悉 基于arm neon 实现的代码有 intrinsic 和inline assembly 两种实现。 1.1 通用寄存器 arm v7 有 16 个 32-bit 通用寄存器&#xff0c;用 r0-r15 表示。 arm v8 有 31 个 64-bit 通用寄存器&#xff0c;用 x0-x30 表示&#xff0c;和 v7 不一样…

如何在 PostgreSQL 中处理海量数据的存储和检索?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01;&#x1f4da;领书&#xff1a;PostgreSQL 入门到精通.pdf 文章目录 如何在 PostgreSQL 中处理海量数据的存储和检索&#xff1f;一、优化表结构设计二、分区技术三、数据压…

ceph log内容解析

log内容构造 如osd的一条log 分别表示 时间戳 线程id 日志等级 子模块 内容实体 剖析源码实现 每条log都是由一个Entry构成 定义在src/log/entry.h中 Entry(short pr, short sub) :m_stamp(clock().now()), // 打印日志时的时间戳m_thread(pthread_self()), // 打印日志的线…

【精品资料】智慧物流园区整体架构方案(46页PPT)

引言&#xff1a;智慧物流园区整体架构方案是一个集现代信息技术、物联网、大数据、云计算及人工智能等前沿科技于一体的综合性物流园区建设蓝图。该方案旨在通过高度集成和智能化的系统&#xff0c;优化物流流程&#xff0c;提升运营效率&#xff0c;降低运营成本&#xff0c;…

智慧新零售移动端收银视频介绍

千呼新零售2.0系统是零售行业连锁店一体化收银系统&#xff0c;包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体&#xff0c;线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货、宠物等连锁店使用。 详细介绍请…

“信息科技风险管理”和“IT审计智能辅助”两个大模块的部分功能详细介绍:

数字风险赋能中心简介 数字风险赋能中心简介 &#xff0c;时长05:13 大家好&#xff01;我是AI主播安欣&#xff0c;我给大家介绍一下数字风险赋能中心。 大家都知道当前我国政企机构的数字化转型已经进入深水区&#xff0c;数字化转型在给我们带来大量创新红利的同时&#xf…

2024年第二季度 DDoS 威胁趋势报告

2024 年上半年&#xff0c;Cloudflare 缓解了 850 万次 DDoS 攻击&#xff1a;第一季度 450 万次&#xff0c;第二季度 400 万次。总体而言&#xff0c;第二季度 DDoS 攻击数量环比下降了 11%&#xff0c;但同比增长了 20%。 DDoS 攻击分布&#xff08;按类型和手段&#xff09…