目录
一、间距比例
查看 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>
在这个示例中,不同屏幕尺寸下网格列数会有所不同。