tailwind css经典常用配置
大小类
-
w-{size}: 设置元素宽度。
- 示例：
<div class="w-1/2">这个div的宽度是父容器宽度的一半。</div>
- 示例：
-
h-{size}: 设置元素高度。
- 示例：
<div class="h-16">这个div的高度是16像素。</div>
- 示例：
-
max-w-{size}: 设置元素最大宽度。
- 示例：
<div class="max-w-md">这个div的最大宽度是中等屏幕大小。</div>
- 示例：
-
max-h-{size}: 设置元素最大高度。
- 示例：
<div class="max-h-screen">这个div的最大高度是屏幕高度。</div>
- 示例：
-
min-w-{size}: 设置元素最小宽度。
- 示例：
<div class="min-w-0">这个div的最小宽度是0。</div>
- 示例：
-
min-h-{size}: 设置元素最小高度。
- 示例：
<div class="min-h-full">这个div的最小高度是100%。</div>
- 示例：
文本类
-
text-{color}: 设置文本颜色。
- 示例：
<p class="text-red-500">这段文本的颜色是红色500。</p>
- 示例：
-
text-{size}: 设置文本大小。
- 示例：
<p class="text-sm">这段文本的大小是小号字体。</p>
- 示例：
-
font-{family}: 设置字体系列。
- 示例：
<p class="font-sans">这段文本使用无衬线字体。</p>
- 示例：
-
font-{weight}: 设置字体粗细。
- 示例：
<p class="font-bold">这段文本使用粗体字体。</p>
- 示例：
-
leading-{size}: 设置行间距。
- 示例：
<p class="leading-6">这段文本的行间距是6。</p>
- 示例：
背景类
-
bg-{color}: 设置背景颜色。
- 示例：
<div class="bg-gray-300">这个div的背景颜色是灰色300。</div>
- 示例：
-
bg-{image}: 设置背景图片（通常与其他背景类结合使用）。
- 示例：
<div class="bg-cover" style="background-image: url('image.jpg');">这个div使用覆盖整个元素的背景图片。</div>
- 示例：
-
bg-{position}: 设置背景位置。
- 示例：
<div class="bg-center" style="background-image: url('image.jpg');">这个div将背景图像居中对齐。</div>
- 示例：
-
bg-{size}: 设置背景尺寸。
- 示例：
<div class="bg-auto" style="background-image: url('image.jpg');">这个div使用原始背景图像大小。</div>
- 示例：
边框和轮廓类
-
border-{color}: 设置边框颜色。
- 示例：
<div class="border-red-500">这个div使用红色边框。</div>
- 示例：
-
border-{size}: 设置边框大小。
- 示例：
<div class="border-2">这个div的边框宽度是2像素。</div>
- 示例：
-
border-{side}: 设置边框位置。
- 示例：
<div class="border-l">这个div只在左侧添加边框。</div>
- 示例：
-
rounded-{size}: 设置圆角大小。
- 示例：
<div class="rounded-full">这个div使用完全圆角。</div>
- 示例：
Typography（排版）
-
字体家族:
font-sans,font-serif,font-mono分别表示无衬线字体、衬线字体和等宽字体。- 示例：
<p class="font-serif">这段文本使用衬线字体。</p>
- 示例：
-
意大利体:
italic,not-italic分别表示使用斜体和不使用斜体。- 示例：
<p class="italic">这段文本使用斜体。</p>
- 示例：
-
字体磅值:
font-thin,font-light,font-normal,font-bold,font-extrabold,font-black分别表示不同的字体粗细。- 示例：
<p class="font-extrabold">这段文本使用特别粗的字体。</p>
- 示例：
-
其他Typography类（如字符变体、字母间距、文本行数限制等）的使用方法与上述类似，只需将类名添加到相应的HTML元素上即可。
列表处理
- list-{style}: 设置列表前的样式，如数字、黑点或无样式。
- 示例：
<ul class="list-decimal"><li>列表项1</li><li>列表项2</li></ul>表示列表前的序号为数字。
- 示例：
弹性布局 Flexing & Grid
-
Flex 常用设置:
flex,flex-col,flex-row,flex-wrap,flex-nowrap,justify-center,items-center,grow-0,shrink-0分别表示不同的Flex布局设置。- 示例：
<div class="flex justify-center items-center">这是一个居中对齐的Flex容器。</div>
- 示例：
-
Grid 常用设置:
grid-cols-4表示网格列数为4。- 示例：
<div class="grid grid-cols-4">这是一个4列的网格容器。</div>
- 示例：
其他
-
间距 spacing:
p-0,px-0,py-0,px-px等表示不同的内边距设置；-mt-8表示上边距为-8rem；space-x-0,space-y-0分别表示专用于设置space-between间距的样式。- 示例：
<div class="p-4">这个div的内边距是4。</div>
- 示例：
-
布局 layout:
container表示容器布局；columns-2表示列布局为2列。- 示例：
<div class="container">这是一个容器布局。</div>
- 示例：
-
怪异盒模型与标准盒模型:
box-border表示怪异盒模型（IE盒模型）；box-content表示标准盒模型。- 示例：
<div class="box-border">这个div使用怪异盒模型。</div>
- 示例：
通过将上述类名添加到HTML元素中，你可以轻松地应用Tailwind CSS的样式规则，从而快速构建出美观且响应式的网页布局。
1864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
