WHAT - Tailwind CSS 的数值机制

目录

  • 一、间距比例
  • 二、尺寸：宽高
    • 宽度 (`w-`)
    • 高度 (`h-`)
    • 示例用法
  • 三、尺寸：最大宽高
    • `min-w-` 和 `max-w-`
    • `min-h-` 和 `max-h-`
    • 常用类名
      • `min-w-`
      • `max-w-`
      • `min-h-`
      • `max-h-`
    • 使用示例
      • 固定宽度和高度
      • 最小和最大宽度
      • 最小和最大高度
    • 综合示例
  • 四、响应式设计
    • Breakpoint prefix
    • 配置
    • 场景
      • 1. 布局相关类
      • 2. 尺寸相关类
      • 3. 文字相关类
      • 4. 间距相关类
      • 5. 背景颜色
      • 6. Flexbox 和 Grid 类
      • 综合示例

一、间距比例

查看 Tailwind CSS 的官方文档：Spacing

在使用 Tailwind CSS 时，py-、mr- 等类名后面跟的数值是基于 Tailwind CSS 的默认间距比例系统。默认情况下，这些数值是从 0 到 96 的倍数，单位是 rem（即基于根元素字体大小的相对单位）。

默认间距比例系统如下：

  • 0 -> 0rem
  • 1 -> 0.25rem
  • 2 -> 0.5rem
  • 3 -> 0.75rem
  • 4 -> 1rem
  • 5 -> 1.25rem
  • 6 -> 1.5rem
  • 8 -> 2rem
  • 10 -> 2.5rem
  • 12 -> 3rem
  • 16 -> 4rem
  • 20 -> 5rem
  • 24 -> 6rem
  • 32 -> 8rem
  • 40 -> 10rem
  • 48 -> 12rem
  • 56 -> 14rem
  • 64 -> 16rem
  • 72 -> 18rem
  • 80 -> 20rem
  • 96 -> 24rem

你可以使用这些数值来控制元素的内边距（py-、px-、pt-、pr-、pb-、pl-）和外边距（my-、mx-、mt-、mr-、mb-、ml-）。

例如：

<div className="py-4 mr-8"><!-- 内容 -->
</div>

上面的示例中，py-4 表示上下内边距为 1rem，mr-8 表示右外边距为 2rem。

如果需要更精确的控制，可以自定义 Tailwind CSS 配置文件 (tailwind.config.js) 中的 spacing 选项。以下是一个示例：

// tailwind.config.js
module.exports = {theme: {extend: {spacing: {'1.5': '0.375rem', // 添加一个自定义间距值'2.5': '0.625rem',}}}
}

这样，你就可以使用 py-1.5 或 mr-2.5 等自定义间距值。

二、尺寸：宽高

查看 Tailwind CSS 的官方文档：Sizing - width

在 Tailwind CSS 中，w- 和 h- 类后面的数值同样遵循默认的尺寸比例系统，不过它们可以接受的值范围更广，包括百分比、视口单位、任意值等。

以下是一些常用的示例：

宽度 (w-)

  • 固定值

    • w-0: 0rem
    • w-1: 0.25rem
    • w-2: 0.5rem
    • w-3: 0.75rem
    • w-4: 1rem
    • w-5: 1.25rem
    • w-6: 1.5rem
    • w-8: 2rem
    • w-10: 2.5rem
    • w-12: 3rem
    • w-16: 4rem
    • w-20: 5rem
    • w-24: 6rem
    • w-32: 8rem
    • w-40: 10rem
    • w-48: 12rem
    • w-56: 14rem
    • w-64: 16rem
    • w-72: 18rem
    • w-80: 20rem
    • w-96: 24rem

  • 百分比

    • w-1/2: 50%
    • w-1/3: 33.333333%
    • w-2/3: 66.666667%
    • w-1/4: 25%
    • w-2/4: 50%
    • w-3/4: 75%
    • w-1/5: 20%
    • w-2/5: 40%
    • w-3/5: 60%
    • w-4/5: 80%
    • w-1/6: 16.666667%
    • w-2/6: 33.333333%
    • w-3/6: 50%
    • w-4/6: 66.666667%
    • w-5/6: 83.333333%
    • w-full: 100%
    • w-screen: 100vw

  • 任意值

    • w-px: 1px
    • w-auto: auto

高度 (h-)

  • 固定值

    • h-0: 0rem
    • h-1: 0.25rem
    • h-2: 0.5rem
    • h-3: 0.75rem
    • h-4: 1rem
    • h-5: 1.25rem
    • h-6: 1.5rem
    • h-8: 2rem
    • h-10: 2.5rem
    • h-12: 3rem
    • h-16: 4rem
    • h-20: 5rem
    • h-24: 6rem
    • h-32: 8rem
    • h-40: 10rem
    • h-48: 12rem
    • h-56: 14rem
    • h-64: 16rem
    • h-72: 18rem
    • h-80: 20rem
    • h-96: 24rem

  • 百分比

    • h-1/2: 50%
    • h-1/3: 33.333333%
    • h-2/3: 66.666667%
    • h-1/4: 25%
    • h-2/4: 50%
    • h-3/4: 75%
    • h-full: 100%
    • h-screen: 100vh

  • 任意值

    • h-px: 1px
    • h-auto: auto

示例用法

<div className="w-1/2 h-48 bg-blue-500"><!-- 内容 -->
</div>

上面的示例中，w-1/2 表示宽度为 50%，h-48 表示高度为 12rem。

你可以通过自定义 tailwind.config.js 来扩展或修改这些默认值：

// tailwind.config.js
module.exports = {theme: {extend: {width: {'128': '32rem', // 添加自定义宽度},height: {'128': '32rem', // 添加自定义高度},}}
}

这样，你就可以使用 w-128 和 h-128 等自定义值了。

三、尺寸：最大宽高

查看 Tailwind CSS 的官方文档：Sizing - MinWidth

在 Tailwind CSS 中，w- 和 h- 定义的是元素的宽度和高度，而 min-w-、max-w-、min-h- 和 max-h- 则用于设置元素的最小和最大宽度、高度。这些类用于控制元素在布局中的尺寸限制。

以下是它们的区别和常见使用方式：

min-w- 和 max-w-

  • min-w-：设置元素的最小宽度，元素宽度不会小于这个值。
  • max-w-：设置元素的最大宽度，元素宽度不会大于这个值。

min-h- 和 max-h-

  • min-h-：设置元素的最小高度，元素高度不会小于这个值。
  • max-h-：设置元素的最大高度，元素高度不会大于这个值。

常用类名

min-w-

<div className="min-w-0"></div> <!-- 没有最小宽度限制 -->
<div className="min-w-full"></div> <!-- 最小宽度为 100% -->
<div className="min-w-min"></div> <!-- 内容最小宽度 -->
<div className="min-w-max"></div> <!-- 内容最大宽度 -->
<div className="min-w-fit"></div> <!-- 自适应内容宽度 -->

max-w-

<div className="max-w-xs"></div> <!-- 最大宽度为 20rem -->
<div className="max-w-sm"></div> <!-- 最大宽度为 24rem -->
<div className="max-w-md"></div> <!-- 最大宽度为 28rem -->
<div className="max-w-lg"></div> <!-- 最大宽度为 32rem -->
<div className="max-w-xl"></div> <!-- 最大宽度为 36rem -->
<div className="max-w-2xl"></div> <!-- 最大宽度为 42rem -->
<div className="max-w-3xl"></div> <!-- 最大宽度为 48rem -->
<div className="max-w-4xl"></div> <!-- 最大宽度为 56rem -->
<div className="max-w-5xl"></div> <!-- 最大宽度为 64rem -->
<div className="max-w-6xl"></div> <!-- 最大宽度为 72rem -->
<div className="max-w-full"></div> <!-- 最大宽度为 100% -->
<div className="max-w-screen-sm"></div> <!-- 最大宽度为 640px -->
<div className="max-w-screen-md"></div> <!-- 最大宽度为 768px -->
<div className="max-w-screen-lg"></div> <!-- 最大宽度为 1024px -->
<div className="max-w-screen-xl"></div> <!-- 最大宽度为 1280px -->

min-h-

<div className="min-h-0"></div> <!-- 没有最小高度限制 -->
<div className="min-h-full"></div> <!-- 最小高度为 100% -->
<div className="min-h-screen"></div> <!-- 最小高度为 100vh -->

max-h-

<div className="max-h-0"></div> <!-- 最大高度为 0 -->
<div className="max-h-full"></div> <!-- 最大高度为 100% -->
<div className="max-h-screen"></div> <!-- 最大高度为 100vh -->

使用示例

固定宽度和高度

<div className="w-64 h-32 bg-gray-200"><!-- 内容 -->
</div>

最小和最大宽度

<div className="min-w-full max-w-sm bg-gray-200"><!-- 内容 -->
</div>

最小和最大高度

<div className="min-h-screen max-h-64 bg-gray-200"><!-- 内容 -->
</div>

在这个示例中，元素的宽度不能小于其父元素的宽度，但也不能超过 24rem（max-w-sm），高度不能小于视口高度（min-h-screen），但也不能超过 16rem（max-h-64）。

综合示例

<div className="container mx-auto p-4"><div className="min-w-full max-w-2xl min-h-screen max-h-96 bg-blue-100 p-4"><!-- 内容 --></div>
</div>

在这个示例中：

  • 容器的最小宽度为 100%，最大宽度为 42rem（max-w-2xl）。
  • 容器的最小高度为视口高度（min-h-screen），最大高度为 24rem（max-h-96）。

这些类使你可以精确控制元素的尺寸，确保它们在各种屏幕尺寸和布局条件下表现良好。

四、响应式设计

查看 Tailwind CSS 的官方文档：Responsive Design

Breakpoint prefix

在 Tailwind CSS 中，sm:、md:、lg:、xl: 和 2xl: 这些前缀通常用于响应式设计，以定义不同屏幕尺寸下的样式。具体来说，它们代表以下屏幕断点：

  • -sm：适用于小屏幕（min-width: 640px），@media (min-width: 640px) { ... }
  • -md：适用于中等屏幕（min-width: 768px），@media (min-width: 768px) { ... }
  • -lg：适用于大屏幕（min-width: 1024px），@media (min-width: 1024px) { ... }
  • -xl：适用于超大屏幕（min-width: 1280px），@media (min-width: 1280px) { ... }
  • -2xl：适用于超超大屏幕（min-width: 1536px），@media (min-width: 1536px) { ... }

你可以使用这些前缀来定义在不同屏幕尺寸下的样式。例如：

<div className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6"><!-- 内容 -->
</div>

在这个示例中：

  • 在所有屏幕尺寸下，宽度为 100%（w-full）。
  • 在小屏幕及更大屏幕下，宽度为 50%（sm:w-1/2）。
  • 在中等屏幕及更大屏幕下，宽度为 33.333333%（md:w-1/3）。
  • 在大屏幕及更大屏幕下，宽度为 25%（lg:w-1/4）。
  • 在超大屏幕及更大屏幕下，宽度为 20%（xl:w-1/5）。
  • 在超超大屏幕及更大屏幕下，宽度为 16.666667%（2xl:w-1/6）。

配置

你可以在 tailwind.config.js 文件中自定义这些断点：

// tailwind.config.js
module.exports = {theme: {screens: {'sm': '640px','md': '768px','lg': '1024px','xl': '1280px','2xl': '1536px',// 自定义断点'3xl': '1920px',},},
};

这样，你就可以使用自定义的 3xl 断点来定义在更大屏幕尺寸下的样式了。

场景

这些实际上可以用在几乎所有 Tailwind CSS 类中，以便为不同的屏幕尺寸设置不同的样式。这种使用方法基于 Tailwind CSS 的响应式设计原则。

以下是一些常见的应用场景和示例：

1. 布局相关类

<div className="p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12 2xl:p-16"><!-- 内容 -->
</div>

在这个示例中，不同屏幕尺寸下内边距（padding）会有所不同。

2. 尺寸相关类

<div className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6"><!-- 内容 -->
</div>

在这个示例中，不同屏幕尺寸下宽度会有所不同。

3. 文字相关类

<p className="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl">响应式文本
</p>

在这个示例中，不同屏幕尺寸下字体大小会有所不同。

4. 间距相关类

<div className="mt-4 sm:mt-6 md:mt-8 lg:mt-10 xl:mt-12 2xl:mt-16"><!-- 内容 -->
</div>

在这个示例中，不同屏幕尺寸下上外边距（margin-top）会有所不同。

5. 背景颜色

<div className="bg-gray-100 sm:bg-blue-100 md:bg-green-100 lg:bg-red-100 xl:bg-yellow-100 2xl:bg-purple-100"><!-- 内容 -->
</div>

在这个示例中，不同屏幕尺寸下背景颜色会有所不同。

6. Flexbox 和 Grid 类

<div className="flex flex-col sm:flex-row md:flex-wrap lg:flex-nowrap xl:flex-row-reverse 2xl:flex-col-reverse"><!-- 内容 -->
</div>

在这个示例中，不同屏幕尺寸下 flex 布局会有所不同。

综合示例

<div className="container mx-auto p-4"><div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4"><div className="bg-gray-300 h-24"></div><div className="bg-gray-300 h-24"></div><div className="bg-gray-300 h-24"></div><div className="bg-gray-300 h-24"></div><div className="bg-gray-300 h-24"></div><div className="bg-gray-300 h-24"></div></div>
</div>

在这个示例中，不同屏幕尺寸下网格列数会有所不同。

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

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

相关文章

达梦数据库系列—30. DTS迁移Mysql到DM

达梦数据库系列—30. DTS迁移Mysql到DM

目录 1.MySQL 源端信息 2.DM 目的端信息 3.迁移评估 4.数据库迁移 4.1源端 MySQL 准备 4.2目的端达梦准备 初始化参数设置 兼容性参数设置 创建迁移用户和表空间 4.3迁移步骤 创建迁移 配置迁移对象及策略 开始迁移 对象补迁 5.数据校验 统计 MySQL 端对象及数…
阅读更多...
Unity: TextMeshPro生成中文字体（附3.5k,7k,2w常用字集）

Unity: TextMeshPro生成中文字体（附3.5k,7k,2w常用字集）

免费常用3千5&#xff0c;7千字&#xff0c;2万字中文字体包 1.选择Window/TextMeshPro/Font Asset Creator 注&#xff1a;准备字体&#xff1a;从字体库或其他来源获取中文字体文件&#xff0c;通常为.ttf、.otf或.ttc格式。最简单的方式是从Windows系统文件的Font文件夹里…
阅读更多...
应用层自定义协议与序列化

应用层自定义协议与序列化

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 协议 简单来说&#xff0c;就是通信双方约定好的结构化的数据。 序列化与反序列化 我们通过一个问题引入这个概念&#xff0c;假如我们要实现一个网络版的计算器&#xff0c;那么现在有两种方案&#xff0c;第一种&#x…
阅读更多...
C语言超市管理系统UI界面

C语言超市管理系统UI界面

以下是部分代码。需要源码的私信 #include<easyx.h> #include<stdio.h> #include<stdlib.h>#define width 1280 #define height 840 #define font_w 35 //字体宽度 #define font_h 90 //字体高度typedef struct node {char name[100];//名字char number[1…
阅读更多...
Modbus转Ethernet/IP网关模块与汇川PLC通讯案例

Modbus转Ethernet/IP网关模块与汇川PLC通讯案例

Modbus转Ethernet/IP网关模块&#xff08;XD-MDEP100&#xff09;是一种用于将Modbus协议转换为Ethernet/IP协议的设备。它可以将Modbus RTU和Modbus TCP两种不同格式的Modbus数据包转换为Ethernet/IP协议的数据包&#xff0c;实现不同厂家的设备之间的数据交换和共享。在汇川P…
阅读更多...
C#实现数据采集系统-查询报文处理和响应报文分析处理

C#实现数据采集系统-查询报文处理和响应报文分析处理

发送报文处理 增加一个功能码映射关系 //功能码映射关系public readonly Dictionary<string, byte> ReadFuncCodes = new Dictionary<string, byte>();<
阅读更多...
Codeforces Round 960 (Div. 2)（ABCD)

Codeforces Round 960 (Div. 2)（ABCD)

C o d e f o r c e s R o u n d 960 ( D i v . 2 ) \Huge{ Codeforces Round 960 (Div. 2)} CodeforcesRound960(Div.2) 文章目录 Problems A. Submission Bait题意思路标程 Problems B. Array Craft题意思路标程 Problems C. Mad MAD Sum题意思路标程 Problems D. Grid Puzzle…
阅读更多...
软件测试----概念篇（笔试相关，一般考察开发模型和测试模型的特点及适用场景）

软件测试----概念篇（笔试相关，一般考察开发模型和测试模型的特点及适用场景）

文章目录 前言一、需求二、开发模型1.什么是“模型”2.软件的生命周期3.常见开发模型瀑布模型螺旋模型增量模型、迭代模型敏捷模型 三、测试模型V模型W模型(双V模型&#xff09; 前言 在当今软件行业飞速发展的时代&#xff0c;软件测试已成为软件质量保障的重要环节。它贯穿于…
阅读更多...
数字转换（树形DP）

数字转换（树形DP）

如何对一个问题挖掘信息把它变成已知的问题十分重要&#xff0c;这一题恰恰体现这一点&#xff1a; https://www.acwing.com/problem/content/1077/ 首先&#xff0c;对于一个数x&#xff0c;它对应一个其约数之和y&#xff0c;同时他们可以相互转换&#xff0c;于是我们可以…
阅读更多...
WhisperX

WhisperX

文章目录 一、关于 WhisperX新闻 &#x1f6a8; 二、设置⚙️1、创建Python3.10环境2、安装PyTorch&#xff0c;例如Linux和Windows CUDA11.8&#xff1a;3、安装此repo4、Speaker Diarization 三、使用&#x1f4ac;&#xff08;命令行&#xff09;1、English2、他语言例如德语…
阅读更多...
前端TS高阶篇

前端TS高阶篇

本次一共推出三篇文章，TS基础篇、TS高阶篇、TS习题篇，三篇文章均已发布。 语法篇 1. 联合类型的问题 interface a1{kind:circle | squarerad?:numberside?:number }function getAre(a:a1){// return a.rad*3 //此处报错，因为 rad 为可选参数，可能未定义return a.rad…
阅读更多...
Cyber Weekly #16

Cyber Weekly #16

赛博新闻 1、OpenAI 发布 GPT-4o mini OpenAI 本周官宣推出 GPT-4o mini&#xff0c;这是 GPT-4o 更小参数量的简化版本。ChatGPT 的免费用户、Plus 用户和 Team 用户能使用 GPT-4o mini 而并非 GPT-3.5 Turbo&#xff0c;企业用户在下周也将获得 GPT-4o mini 的权限。GPT-4o…
阅读更多...
少儿编程启蒙宝典：Scratch动画游戏108变

少儿编程启蒙宝典：Scratch动画游戏108变

一、编程教育的时代价值与意义 随着数字时代的深入发展&#xff0c;社会对人才的需求正发生深刻变革&#xff0c;计算思维与编程能力已成为衡量个人竞争力的重要指标。在此背景下&#xff0c;培养孩子们运用计算思维解决实际问题的能力&#xff0c;成为教育领域的重要任务。编…
阅读更多...
UE4-获得角色控制权的两种方法

UE4-获得角色控制权的两种方法

方法一&#xff1a; 方法二&#xff1a; 注意此方法不能有多个玩家出生点&#xff0c;如果有多个玩家出生点&#xff0c;会随机的选择一个玩家出生点进行生成。
阅读更多...
IP5306移动电源DIY

IP5306移动电源DIY

最近制作一款移动电源&#xff0c;芯片采用的是IP5306
阅读更多...
JavaScript 如何判断 URL 是否合法

JavaScript 如何判断 URL 是否合法

目录 一、使用正则表达式验证 URL&#xff1a; 二、利用HTML5的URL对象 三、使用元素判断URL 四、最靠谱方法 一、使用正则表达式验证 URL&#xff1a; function isValidUrl(url) {const regex /^(https?:\/\/)?([\da-z\.-])\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;return…
阅读更多...
UDP详细总结

UDP详细总结

UDP协议特点 UDP是无连接的传输层协议&#xff1b; UDP使用尽最大努力交付&#xff0c;不保证可靠交付&#xff1b; UDP是面向报文的&#xff0c;对应用层交下来的报文&#xff0c;不合并&#xff0c;不拆分&#xff0c;保留原报文的边界&#xff1b; UDP没有拥塞控制&#…
阅读更多...
python实现图像对比度增强算法

python实现图像对比度增强算法

python实现直方图均衡化、自适应直方图均衡化、连接组件标记算法 1.直方图均衡化算法详解算法步骤公式Python 实现详细解释优缺点 2.自适应直方图均衡化算法详解算法步骤公式Python 实现详细解释优缺点 3.连接组件标记算法详解算法步骤8连通与4连通公式Python 实现详细解释优缺…
阅读更多...
微服务实现全链路灰度发布

微服务实现全链路灰度发布

一、实现步骤 再请求 Header 中打上标签&#xff0c;例如再 Header 中添加 "gray-tag: true" &#xff0c;其表示要进行灰度测试&#xff08;访问灰度服务&#xff09;&#xff0c;而其他则访问正式服务。在负载均衡器 Spring Cloud LoadBalancer 中&#xff0c;拿到…
阅读更多...
Deepin系统，中盛科技温湿度模块读温度纯c程序（备份）

Deepin系统，中盛科技温湿度模块读温度纯c程序（备份）

#include <stdio.h> #include <fcntl.h> #include <unistd.h> #include <termios.h>int main() {int fd;struct termios options;// 打开串口设备fd open("/dev/ttyMP0", O_RDWR | O_NOCTTY|O_NDELAY); //O_NDELAY:打开设备不阻塞//O_NOCTT…
阅读更多...
最新文章

Copyright @ 2022~2023