https://juejin.cn/post/7397326977424769035
// 文本颜色 -------------------------------------------------------------
.text-black, .text-white, .text-gray-100... .text-gray-900
.text-primary, .text-secondary, .text-success, .text-error
.text-transparent
.text-current 使用元素的 color 属性值作为文本颜色
.text-inherit 继承父元素的文本颜色
.text-opacity- 设置文本的不透明度
// 文本大小-------------------------------------------------------------
.text-xs, .text-sm, .text-base, .text-lg,
.text-xl, .text-2xl, .text-3xl, .text-4xl,
.text-5xl,.text-6xl, .text-7xl
.leading -- (控制行高)
// 文本对齐-------------------------------------------------------------
.text-left, .text-center, .text-right, .text-justify
// 字体加粗-------------------------------------------------------------
.font-normal, .font-medium, .font-semibold,
.font-bold, .font-extrabold, .font-black
// 文本装饰-------------------------------------------------------------
.underline, .line-through, .no-underline
.hover:underline, .focus:underline
// 文字阴影-------------------------------------------------------------
.text-shadow-sm, .text-shadow-md, .text-shadow-lg
.text-shadow-[length], .text-shadow-[length]_[length]
// 文本转换-------------------------------------------------------------
.uppercase, .lowercase, .capitalize, .normal-case
// 文本溢出-------------------------------------------------------------
.truncate, .overflow-hidden
.line-clamp-, .line-clamp-[number] 控制多行文本截断
// 字体系列---自定义字体需要在配置文件中定义---------------------------------
.font-sans, .font-serif, .font-mono
// 字体大小的响应式变体---------------------------------------------------
.sm:text-lg, .md:text-xl, .lg:text-2xl, .xl:text-3xl, .2xl:text-4xl
// 边距（Margin）--------------------------------------
四向边距：.m- (所有边)
垂直边距：.my- (顶部和底部)
水平边距：.mx- (左侧和右侧)
顶部边距：.mt-
右侧边距：.mr-
底部边距：.mb-
左侧边距：.ml-
// 填充（Padding）---------------------------------------------
四向填充：.p- (所有边)
垂直填充：.py- (顶部和底部)
水平填充：.px- (左侧和右侧)
顶部填充：.pt-
右侧填充：.pr-
底部填充：.pb-
左侧填充：.pl-
// 边距和填充的值----------------------------------
固定单位：0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96, 128
响应式单位：.sm:, .md:, .lg:, .xl:, .2xl:
百分比：.mr-1/2, .ml-auto (自动计算)
//负边距--------------------------------------------
负四向边距：.-m-
负垂直边距：.--my-
负水平边距：.--mx-
负顶部边距：.--mt-
负右侧边距：.--mr-
负底部边距：.--mb-
负左侧边距：.--ml-
// 边框宽度------------------------------------------------
.border: 添加默认边框（1px solid）
.border-t, .border-r, .border-b, .border-l: 分别添加顶部、右侧、底部、左侧边框
.border-x, .border-y: 添加左右两侧或上下两侧边框
.border-[width]: 指定边框宽度，如 .border-2 表示2px宽度
// 边框颜色------------------------------------------------
.border-black, .border-white, .border-gray-100... .border-gray-900: 不同颜色的边框
.border-transparent: 透明边框
.border-current: 使用元素的 currentColor 作为边框颜色
.border-[color]: 自定义边框颜色，如 .border-red-500
// 边框样式------------------------------------------------
.border-solid: 实线边框（默认）
.border-dashed: 虚线边框
.border-dotted: 点线边框
.border-double: 双线边框
.border-none: 无边框
// 边框半径------------------------------------------------
.rounded: 默认圆角边框
.rounded-full: 完全圆形的边框
.rounded-t, .rounded-r, .rounded-b, .rounded-l: 分别设置顶部、右侧、底部、左侧的圆角
.rounded-tr, .rounded-br, .rounded-bl, .rounded-tl: 设置特定角落的圆角
.rounded-[radius]: 自定义圆角大小，如 .rounded-lg
// 边框阴影------------------------------------------------
.shadow-sm, .shadow, .shadow-lg, .shadow-xl: 不同大小的阴影
.shadow-inner: 内部阴影
.shadow-[color]: 自定义阴影颜色
.shadow-[length]: 自定义阴影长度
.shadow-[length]_[length]: 自定义阴影位置和模糊程度
<div className="flex flex-col items-center justify-center gap-4">
<div className="border-red size-40 rounded-3xl border-2 border-dashed"></div>
<div className="h-24 w-40 rounded-3xl border-2 border-t-4 border-b-4 border-dashed border-t-red-400 border-b-blue-400"></div>
</div>