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的样式规则,从而快速构建出美观且响应式的网页布局。