一. 布局类
1. `flex`
将元素设置为弹性容器，使其子元素可以根据容器的空间进行弹性布局。
<div class="flex">...</div>2. `grid`
用于创建网格布局，方便进行复杂的页面布局规划。
<!-- 可创建一个 3 列的网格容器。 -->
<div class="grid grid-cols-3">...</div>3. `container`
创建一个最大宽度的容器，用于页面的整体布局和内容的包裹。
4. `mx-auto`
使元素在水平方向上居中对齐，通常需要给元素设置宽度才能生效。
5. `justify-{alignment}`
用于设置弹性容器内子元素在主轴上的对齐方式
例如：`justify-center`（水平居中）、`justify-start`（左对齐）、`justify-end`（右对齐）、`justify-between`（两端对齐，中间自动分配空间）、`justify-around`（每个子元素周围都有相等的空间）等。
6. `items-{alignment}`
设置弹性容器内子元素在交叉轴上的对齐方式
例如：`items-center`（垂直居中）、`items-start`（顶部对齐）、`items-end`（底部对齐）。
7. `flex-col`
将弹性容器的子元素排列为列，即垂直方向布局。与之相对的 `flex-row` 是默认的水平方向布局。在响应式设计中，可以结合断点使用。
例如 `md:flex-row`（在中等屏幕及以上为水平布局）、`sm:flex-col`（在小屏幕上为垂直布局）。
二. 间距类
1. `m-{size}`
设置元素的外边距（margin），`m` 是 margin 的缩写，`{size}` 可以是 `0`、`1`、`2`、`4`、`8` 等数字，数字越大，外边距越大。
例如：`m-4` 表示设置 1rem（通常是 16px，具体取决于根元素的字体大小设置）的外边距。
2. `p-{size}`
设置元素的内边距（padding），`p` 是 padding 的缩写，用法与外边距类 `m-{size}` 类似。
3. `mt-{size}`、`mb-{size}`、`ml-{size}`、`mr-{size}`
分别表示设置元素的顶部外边距、底部外边距、左侧外边距、右侧外边距。
例如：`mt-2` 表示设置顶部外边距为 0.5rem。
4. `pt-{size}`、`pb-{size}`、`pl-{size}`、`pr-{size}`
分别表示设置元素的顶部内边距、底部内边距、左侧内边距、右侧内边距。
三. 尺寸类
1. `w-full`
设置元素的宽度为 100%，占满父元素的宽度。
2. `h-screen`
设置元素的高度为屏幕的高度，常用于创建全屏高度的元素，如全屏背景、导航栏等。
3. `w-{percentage}`
可以设置元素的宽度为父元素宽度的百分比
例如：`w-1/2` 表示宽度为父元素的一半，`w-3/4` 表示宽度为父元素的四分之三。
4. `h-{percentage}`、`h-{[size]}`
设置元素的高度为父元素高度的百分比。
例如：`h-[18px]` 表示高度18px。
5. `max-w-{size}`
设置元素的最大宽度，如 `max-w-md`（在中型屏幕尺寸下的最大宽度）、`max-w-lg`（在大型屏幕尺寸下的最大宽度）等。
6. `min-w-{size}`
设置元素的最小宽度。
7. `max-h-{size}`
设置元素的最大高度。
8. `min-h-{size}`
设置元素的最小高度。
四. 字体类
1. `text-{size}`
设置文本的字体大小
例如：`text-xs`（超小字体）、`text-sm`（较小字体）、`text-base`（基础字体大小，默认字体大小）、`text-lg`（较大字体）、`text-xl`（大字体）、`text-2xl`（非常大字体）、`text-3xl`（极大的字体）、`text-4xl`（最大字体）等。
2. `font-bold`
设置文本为粗体。
3. `font-italic`
设置文本为斜体。
4. `underline`
为文本添加下划线。
5. `overline`
为文本添加上划线。
6. `line-through`
为文本添加删除线。
7. `leading-{size}`
设置文本的行高
例如：`leading-loose`（宽松的行高）、`leading-normal`（正常行高）、`leading-tight`（紧凑的行高）。
8. `tracking-{size}`
设置文本的字符间距
例如：`tracking-wide`（宽字符间距）、`tracking-tighter`（更紧凑的字符间距）。
五. 颜色类
1. `text-{color}`
设置文本的颜色
例如：`text-red-500`（红色调的文本颜色，数字越大颜色越深）、`text-blue-600`、`text-green-300` 等。
2. `bg-{color}`
设置元素的背景颜色
例如：`bg-gray-200`（浅灰色背景）、`bg-purple-400` 等。
3. `opacity-{level}`
设置元素的不透明度
例如：`opacity-50`（50% 的不透明度）、`opacity-75`（75% 的不透明度）等。
六. 边框类
1. `border`
添加默认宽度的边框。
2. `border-{color}`
设置边框的颜色，如 `border-gray-300`（灰色边框）、`border-red-500` 等。
3. `border-{side}`
为特定方向添加边框
例如：`border-top`（顶部边框）、`border-right`（右侧边框）、`border-bottom`（底部边框）、`border-left`（左侧边框）。
4. `border-{width}`
设置边框的宽度
例如：`border-2`（较细边框）、`border-4`（默认边框宽度）、`border-8`（较粗边框）等。
5. `border-{style}`
设置边框的样式
例如：`border-solid`（实线边框，默认）、`border-dashed`（虚线边框）、`border-dotted`（点状边框）、`border-double`（双线边框）。
6. `rounded`
设置元素的边框圆角，默认的圆角大小。
也可以使用 `rounded-lg`（较大圆角）、`rounded-xl`（更大圆角）、`rounded-tr`（仅顶部右侧圆角）、`rounded-bl`（仅底部左侧圆角）等类来调整圆角的大小和位置。
七. 阴影类
1. `shadow`
添加阴影效果。有不同程度的预设阴影大小
例如：`shadow-xs`（极小阴影）、`shadow-sm`（小阴影）、`shadow-md`（中等阴影）、`shadow-lg`（大阴影）、`shadow-xl`（特大阴影）、`shadow-2xl`（超特大阴影）等。还有 `shadow-inner` 用于添加内部阴影。
八. 显示与隐藏类
1. `hidden`
隐藏元素，使其在页面上不显示。
2. `block`
将元素显示为块级元素。
3. `inline`
将元素显示为内联元素。
4. `inline-block`
将元素显示为内联块级元素，兼具内联元素和块级元素的特点。
九. 响应式类
通过在类名前添加断点关键字来设置不同屏幕尺寸下的样式，如 `sm:`（小屏幕）、`md:`（中等屏幕）、`lg:`（大屏幕）、`xl:`（超大屏幕）等。
例如：`sm:text-lg`（在小屏幕上文本字体大小为 `text-lg`）。
1. `hover:{class}`
设置元素在鼠标悬停时的样式
例如：`hover:text-blue-500`（鼠标悬停时文本颜色变为蓝色）。
2. `focus:{class}`
设置元素在获得焦点时的样式，常用于表单元素等。
3. `active:{class}`
设置元素在被激活（如按钮被点击时）的样式。
十. 过渡与动画类
1. `transition-{property}`
设置元素的过渡效果，如 `transition-all`（所有属性的过渡）、`transition-color`（颜色的过渡）、`transition-opacity`（不透明度的过渡）等。
可以与过渡时间、延迟等属性一起使用，如 `transition-all duration-300ms ease-in-out`（设置过渡效果的持续时间为 300 毫秒，缓入缓出）。
2. `animate-{animation}`
应用预定义的动画效果，不过需要在配置文件中定义动画，然后在 HTML 中使用该类名来应用动画。
例如：`animate-bounce`（弹跳动画）、`animate-spin`（旋转动画）等。
标签：总结,tailwind,text,元素,边框,设置,border,类名,size From： https://blog.csdn.net/weixin_64684095/article/details/143382315