优势

不用命名，
不会使css文件变大
随意更改
与内联样式相比
是从预定义的设计系统中选择样式
响应式设计
可使用hover，focus等
hover:鼠标悬停 focus:焦点 active: group-hover:悬停在父元素上时对子元素设置样式。父元素添加group，子元素添加group-hover group-focus:与group-hover一样 focus-within:尽在一个字元素获得焦点时才应用功能类 focus-visible:当一个元素具有焦点且仅在用户使用键盘时才应用功能类 motion-safe:仅在prefers-reduced-motion匹配no-preference时应用功能类 motion-reduce:仅在prefers-reduced-motion匹配reduce时应用功能类 disabled:当一个元素被禁用时才应用功能类。。。。。
深色模式：当启用深色模式时可以设置不同的样式

使用flex来创建一个块级的flex容器

内边距padding

pt pr pb pl代表上右下左方内边距 px水平方向 py垂直方向 p- number为四边添加边距

响应式

响应式前缀在所有其他前缀之前
要在特定的断点处控制元素的内边距，在任何现有的padding功能类前添加{sm|md|lg|xl|2xl}:前缀

640–767:sm，768–1023:md，1024-1279:lg，1280-1535:xl 大于1536:2xl
适用于每一个功能类
当父级元素为flex容器时，为了保证图片不会缩小 添加flex-shrink-0，
没有加这些前缀的在所有屏幕上都有效，加了的仅在期指定断点及以上的屏幕生效
为移动设备设计样式，不需要加这些前缀，通常先设计布局，然后在sm屏幕上更改，然后是md等。。。
定位单个断点，仅包括min-width而没有max-width，说明在较小的断点上添加的任何功能类都将应用在更大的断点上
如果只想在一个断点上应用某个功能类 解决方案时在更大的断点添加另一个功能类

也可以在tailwind.config.js中自定义断点

最大宽度

max-w-{size}
设置元素最大宽度

max-w-prose：最佳的阅读宽度。

外边距margin

m{t|r|b|l}控制上右下左外边距 mx｜my控制水平｜垂直方向的外边距 m-number为四周添加外边距
负外边距-m{side}-{size}

背景颜色

bg-{color}控制元素背景颜色
bg-opacity-{100|75|50|25|0}
添加前缀hover:表示鼠标在元素标签上时的样式 也可做为响应式

添加前缀focus:控制焦点元素

边框圆角

盒阴影

外阴影
内阴影
无阴影 一般用于响应式移除阴影

宽度

基于百分比的宽度

高度

使用h-number固定高度
使用h-full将一个元素高度设置为其父元素的100% 但要求父元素有一个定义的高度

子元素间隔

水平间隔space-x-amount
space-y-amount垂直间隔
space-x|yreverse进行元素反转

字体大小

text-size控制元素字体大小
text-color控制文字颜色
text-opacity-amount控制文字颜色不透明度
font-weight控制字体粗细

容器

container设置一个元素的max-width来匹配当前断点的min-width，不会自动居中，也没有任何内置的水平方向的内边距。
使用mx-auto使容器居中，使用呢px-{size}添加水平内边距？？？？？？？？？？

Box Sizing

使用box-border将元素的box-sizing设置为border-box,包括元素的内边距和边框，内容区会缩小。box-content不包括边框和内边距，内容区不变。默认为box-border

Display

使用block创建块级元素
使用flow-root创建一个有自己的block formatting context的块级元素
使用 inline-block创建一个内联块级元素
使用inline创建一个内联元素
使用flex创建一个块级的flex容器
使用inline-flex创建一个内联的flex容器
使用grid创建一个grid容器
使用inline-grid创建内联grid容器
内联元素与块级元素：排列方式，块级元素会独占一行，内联元素和内联块元素会在一行内显示。宽高边距设置，块级元素可以，内联元素无效。默认宽度，块级元素默认100%，内联元素根据自身内容或子元素决定。内联元素可以设置padding，margin但只在水平方向有效
使用contents创建一个phantom容器，它的子代就像父代的直接子代一样
使用table ，table-row，table-cell，table-caption，table-column，table-column-group，table-header-group，table-row-group，table-footer-group创建与其对应的表元素一样的元素
使用hidden设置一个元素为display:none 并从页面中 移除

float

float-right将元素浮动到其容器右边

float-left将一个元素浮动到其容器左边
float-none不浮动

清除浮动

用clear-left将元素放置在任何先前的左浮动元素的下方
用clear-right将元素放置在任何先前的右浮动元素下方
用clear-both将元素放置在所有之前的浮动元素下方
clear-none将重制应用到元素上的清楚浮动行为

Object fit

用于控制可替换元素的内容如何调整大小的功能类

object-contain调整元素内容的大小，使其保持在容器内
用object-cover调整元素内容的大小以覆盖其容器
用object-fill拉伸元素的内容以适应其容器
object-none以原始大小显示元素内容，忽略容器大小
以原始大小显示元素内容 必要时用object-scale-down将其缩小以适应容器

object position

用于控制可替换元素的内容在其容器中的位置

溢出

overflow-visible防止元素内内容被剪切，但任何溢出元素边界的内容都是可见的
overflow-auto在一个元素的内容溢出改元素的边界时为其添加滚动条，只有在需要滚动时才会显示
overflow-hidden剪切元素中任何溢出边界的内容
overflow-x-auto允许水平滚动
overflow-y-auto允许垂直滚动
overflow-x-scroll允许水平滚动并始终显示滚动条，除非系统禁用
overflow-y-scroll使用垂直滚动
使用overflow-scroll在所有方向添加滚动条且总是显示滚动条

overscroll behavior

overscroll-auto使用户能够在到达基础滚动区域的边界时继续滚动其父滚动区域

overscroll-contain防止目标区域的滚动触发父元素的滚动，但在支持的操作系统中，当滚动到容器的末端时，保留反弹效果

overscroll-none防止目标区域的滚动触发父元素的滚动，也防止在滚动过容器的末端时产生的反弹效果

positon

static：根据常规文档流来定位元素，任何便宜都将被忽略，而且该元素不会作为距对定位的子元素的位置参考
relative：根据常规文档流定位，偏移量时相对于元素的正常位置计算的，并且该元素将作为绝对定位的子元素的位置参考
absolute：将一个元素定位在文档常规流之外，使相邻元素的行为就像该元素不存在一样，偏移量时相对于最近的位置不是static的父元素计算的，而且该元素将作为其他距对定位的子元素的位置参考

fixed：定位一个元素相对于浏览器窗视口的位置，偏移量是相对于视口计算的，且该元素将作为绝对定位的子元素的位置参考。
sticky：将一个元素定位为relative，直到它超过一个指定的阈值，然后将其视为fixed，直到它的父元素离开屏幕

top/right/bottom/left

使用 {top|right|bottom|left|inset}-0 功能类，将绝对定位的元素锚定在最近定位的父元素的任何边缘上。

可见性

invisible:隐藏一个元素，但仍保持它在DOM中的位置，影响其他元素的布局(.hidden为移除)
visible：是一个元素可见，对于在不同的屏幕尺寸下撤销invisible功能类非常有用

z-{index}

使用z-{index}控制一个元素的堆栈顺序或三维定位，使得与其显示顺序无关

flex direction

flex-row：与文本相同的方向水平放置flex子项
flex-row-reverse：与文本相反的方向水平放置子项
flex-col：垂直方向放置子项
flex-col：垂直方向反向