tailwind css 是一个实用程序优先的 css 框架，其中包含一些类，可以直接在标记中组合这些类来构建任何设计。
tailwind css 是一个实用程序优先的 css 框架，它提供低级实用程序类来构建自定义设计，而无需编写 css。这种方法允许我们实现完全自定义的组件设计，而无需编写一行自定义 css。“you are'不要浪费精力发明类名”.
这是从将在生产环境中使用的最终 css 文件中删除未使用的 css 类的过程。这是一个优化过程，最终的 css 尺寸更小，更易于维护并显示出更高的性能。
下划线：
underline underline-offset-<size> decoration-<color>-<shade> //color for underline decoration-<thickness> // size of underline decoration-<style> // wavy, double </style></thickness></shade></color></size>
文字样式
text-<color>-<shade> //color of text text-opacity-<shade> //opacity of text text-<size> //size of text text-<alignment> //alignment of text </alignment></size></shade></shade></color>
背景颜色
bg-<color>-<shade></shade></color>
边界半径
rounded-<size></size>
字体样式
font-<style> //mono, serif, sans font-bold font-thin </style>
斜体：
italic
隐藏元素：
hidden
显示（与隐藏相反）：
block
填充
p-<size> /* all sides */ px-<size> /* horizontal (left and right) */ py-<size> /* vertical (top and bottom) */ pl-<size> /* left */ pr-<size> /* right */ pt-<size> /* top */ pb-<size> /* bottom */ </size></size></size></size></size></size></size>
保证金
m-<size> /* all sides */ mx-<size> /* horizontal (left and right) */ my-<size> /* vertical (top and bottom) */ ml-<size> /* left */ mr-<size> /* right */ mt-<size> /* top */ mb-<size> /* bottom */ </size></size></size></size></size></size></size>
flexbox
flex flex-<direction> // row or column </direction>
证明内容合理
justify-<option></option>
对齐项目
items-<option> //start,end,center </option>
响应式设计
sm /* small devices */ md /* medium devices */ lg /* large devices */ xl /* extra large devices */
尺寸
h-<size> w-<size></size></size>
边框
border border-<size> border-<color></color></size>
悬停状态
hover:<utility></utility>
