https://tailwind.nodejs.cn/docs/installation
间隔
内边距
外边距
间距
p-5	padding: 1.25rem; /* 垫5 即乘4等于20px */
px-5	padding-left: 1.25rem; /* 垫左 */padding-right: 1.25rem; /* 垫右 */
py-5	padding-top: 1.25rem; /* 垫顶 */padding-bottom: 1.25rem; /* 垫底 */
ps-5	padding-inline-start: 1.25rem; /* 20px */
pe-5	padding-inline-end: 1.25rem; /* 20px */
pt-5	padding-top: 1.25rem; /* 20px */
pr-5	padding-right: 1.25rem; /* 20px */
pb-5	padding-bottom: 1.25rem; /* 20px */
pl-5	padding-left: 1.25rem; /* 20px */
m-5	margin: 1.25rem; /* 20px */
mx-5	margin-left: 1.25rem; /* 20px */margin-right: 1.25rem; /* 20px */
my-5	margin-top: 1.25rem; /* 20px */margin-bottom: 1.25rem; /* 20px */
ms-5	margin-inline-start: 1.25rem; /* 20px */
me-5	margin-inline-end: 1.25rem; /* 20px */
mt-5	margin-top: 1.25rem; /* 20px */
mr-5	margin-right: 1.25rem; /* 20px */
mb-5	margin-bottom: 1.25rem; /* 20px */
ml-5	margin-left: 1.25rem; /* 20px */
space-x-5	margin-left: 1.25rem; /* 20px */
space-y-5	margin-top: 1.25rem; /* 20px */
尺寸
宽度
最小宽度
最大宽度
高度
最小高度
最大高度
w-0	width: 0px;
w-px	width: 1px;
w-0.5	width: 0.125rem; /* 2px */
w-5	width: 1.25rem; /* 20px */
w-full	width: 100%;
w-screen	width: 100vw;
w-min	width: min-content;
w-max	width: max-content;
w-fit	width: fit-content;
h-5	height: 1.25rem; /* 20px */
h-auto	height: auto;
h-full	height: 100%;
h-screen	height: 100vh;
h-min	height: min-content;
h-max	height: max-content;
h-fit	height: fit-content;

min-w-0	min-width: 0px;
min-w-full	min-width: 100%;
min-w-min	min-width: min-content;
min-w-max	min-width: max-content;
min-w-fit	min-width: fit-content;
max-w-0	max-width: 0rem; /* 0px */
max-w-none	max-width: none;
max-w-xs	max-width: 20rem; /* 320px */
max-w-sm	max-width: 24rem; /* 384px */
max-w-md	max-width: 28rem; /* 448px */
max-w-lg	max-width: 32rem; /* 512px */
max-w-xl	max-width: 36rem; /* 576px */
max-w-2xl	max-width: 42rem; /* 672px */
max-w-3xl	max-width: 48rem; /* 768px */
max-w-4xl	max-width: 56rem; /* 896px */
max-w-5xl	max-width: 64rem; /* 1024px */
max-w-full	max-width: 100%;
max-w-min	max-width: min-content;
max-w-max	max-width: max-content;
max-w-fit	max-width: fit-content;
max-w-prose	max-width: 65ch;
max-w-screen-sm	max-width: 640px;
max-w-screen-md	max-width: 768px;
max-w-screen-lg	max-width: 1024px;
max-w-screen-xl	max-width: 1280px;
max-w-screen-2xl	max-width: 1536px;
min-h-0	min-height: 0px;
min-h-full	min-height: 100%;
min-h-screen	min-height: 100vh;
min-h-min	min-height: min-content;
min-h-max	min-height: max-content;
min-h-fit	min-height: fit-content;
max-h-96	max-height: 24rem; /* 384px */
max-h-none	max-height: none;
max-h-full	max-height: 100%;
max-h-screen	max-height: 100vh;
max-h-min	max-height: min-content;
max-h-max	max-height: max-content;
max-h-fit	max-height: fit-content;
边框
边界半径
边框宽度
边框颜色
边框样式
分割宽度
划分颜色
划分风格
轮廓宽度
轮廓颜色
轮廓样式
轮廓偏移
环宽
戒指颜色
环偏移宽度
环偏移颜色
border-0	border-width: 0px;
border	border-width: 1px;
border-t	border-top-width: 1px;
border-r	border-right-width: 1px;
border-b	border-bottom-width: 1px;
border-l	border-left-width: 1px;
border-4	border-width: 4px;

divide-solid > * + *	border-style: solid;
divide-dashed > * + *	border-style: dashed;
divide-dotted > * + *	border-style: dotted;
divide-double > * + *	border-style: double;
divide-none > * + *	border-style: none;
border-slate-500	border-color: rgb(100 116 139);
rounded-tl-full	border-top-left-radius: 9999px; /* 边界半径 */
rounded-tr-none	border-top-right-radius: 0px; /* */
outline-4	outline-width: 4px;
outline-slate-500	outline-color: #64748b;
outline-none	outline: 2px solid transparent;
outline-offset: 2px;
outline	outline-style: solid;
outline-dashed	outline-style: dashed;
outline-dotted	outline-style: dotted;
outline-double	outline-style: double;
outline-offset-4	outline-offset: 4px;
ring-4	box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-slate-500	--tw-ring-color: rgb(100 116 139);
ring-offset-4	--tw-ring-offset-width: 4px;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-slate-500	--tw-ring-offset-color: #64748b;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
布局
纵横比
容器
列
之后休息
之前中断
闯入
盒子装饰打破
盒子尺寸
展示
花车
清除
隔离
物体适配
物体位置
溢出
过度滚动行为
位置
上/右/下/左
能见度
Z-索引
弹性盒和网格
弹性基础
弯曲方向
柔性包裹
柔性
弹性成长
弹性收缩
命令
网格模板列
网格列开始/结束
网格模板行
网格行开始/结束
网格自动流程
网格自动列
网格自动行
差距
证明内容合理
证明项目合理
为自己辩护
对齐内容
对齐项目
自我对齐
放置内容
放置物品
放置自我
排版
字体系列
字体大小
字体平滑
字体样式
字体粗细
字体变体数字
字母间距
线夹
行高
列表样式图片
列表样式位置
列表样式类型
文本对齐
文字颜色
文字装饰
文字装饰颜色
文字装饰风格
文字装饰厚度
文本下划线偏移
文本转换
文本溢出
文本缩进
垂直对齐
空白
断词
连字符
内容
背景
背景附件
背景剪辑
背景颜色
背景起源
背景位置
背景重复
背景尺寸
背景图
渐变色标

效果
盒子阴影
框阴影颜色
不透明度
混合混合模式
背景混合模式
过滤器
模糊
亮度
对比
投影
灰度
色相旋转
倒置
饱和
棕褐色
背景模糊
背景亮度
背景对比度
背景灰度
背景色调旋转
背景反转
背景不透明度
背景饱和度
背景棕褐色
表格
边界崩溃
边框间距
表格布局
标题侧
转场和动画
过渡属性
过渡持续时间
转换计时功能
转换延迟
动画片
变换
规模
旋转
翻译
倾斜
变换原点
互动性
强调色
外貌
光标
插入符号颜色
指针事件
调整大小
滚动行为
滚动边距
滚动填充
滚动对齐
滚动急停
滚动捕捉类型
触摸动作
用户选择
会改变
静止无功发生器
充满
中风
笔划宽度
无障碍
屏幕阅读器
官方插件
版式
形式
纵横比
容器查询


颜色
白色	white
蓝灰	slate
灰色	gray
锌	zinc
中立的	neutral
石	stone
红色	red
橙色	orange
琥珀色	amber
黄的	yellow
石灰	lime
绿色	green
祖母绿	emerald
蓝绿色	teal
青色	cyan
天	sky
蓝色	blue
靛蓝	indigo
紫罗兰	violet
紫色	purple
紫红色	fuchsia
粉红色	pink
基础
*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
}

	

{{ message }}

结果