Tailwind 类名速查
搜索类名
布局 Layout
flex弹性布局grid网格布局block块级元素inline-block行内块元素hidden隐藏元素contents内容直接渲染Flex 方向
flex-row水平排列flex-col垂直排列flex-wrap允许换行flex-nowrap不换行Flex 对齐
justify-start/center/end/between/around/evenly主轴对齐items-start/center/end/baseline/stretch交叉轴对齐self-start/center/end/auto单个项目对齐place-items-center同时设置 items 和 justify-items间距 Spacing
p/p-x/p-y/p-t/p-r/p-b/p-l-{n}内边距m/m-x/m-y/m-t/m-r/m-b/m-l-{n}外边距space-x/y-{n}子元素间距gap/gap-x/gap-y-{n}网格/弹性间距尺寸 Sizing
w/n/min-w/max-w宽度相关h/min-h/max-h高度相关w-full/h-screen100%宽高w-screen/h-screen视口尺寸aspect-square/video/portrait宽高比排版 Typography
text-xs/sm/base/lg/xl/2xl/3xl字号大小font-light/normal/medium/semibold/bold字重text-left/center/right/justify文本对齐truncate/overflow-hidden/scroll文本溢出leading/tight/normal/relaxed/loose行高tracking-tighter/tight/normal/wide/wider字间距颜色 Colors
text-{color}-{n}文字颜色bg-{color}-{n}背景颜色border-{color}-{n}边框颜色from-{color}-via-{color}-to-{color}渐变颜色边框 Borders
rounded/rounded-md/rounded-lg/rounded-xl/full圆角border/border-0/border-2/border-4边框宽度border-x/y/t/r/b单边边框outline/outline-offset外轮廓效果 Effects
shadow/sm/md/lg/xl/2xl/inner/none阴影opacity-0/25/50/75/100透明度blur/sm/md/lg/xl/none模糊brightness-0/50/75/100/125/150/200亮度contrast-0/50/75/100/125/150/200对比度交互 Interaction
cursor-auto/default/pointer/move/grab鼠标样式select-none/text/all/auto文本选择resize/resize-none/resize-y/resize-x调整大小pointer-events-none/auto指针事件过渡动画 Transitions
transition/transition-all过渡效果duration-75/100/150/200/300/500/700/1000过渡时长ease-linear/in/out/in-out过渡曲线animate-spin/ping/pulse/bounce动画效果变换 Transform
scale-x/y/{n}缩放rotate-{n}旋转translate-x/y/{n}平移skew-x/y-{n}倾斜origin-center/top/bottom/left/right变换原点响应式 Responsive
sm: md: lg: xl: 2xl:断点前缀@container容器查询伪类 Variants
hover: focus: active:交互状态disabled: checked: required:表单状态first: last: odd: even:子元素位置group-hover: peer-hover:父子兄弟状态网格 Grid
grid-cols-{n}列数grid-rows-{n}行数col-span-{n}/full跨列row-span-{n}/full跨行col/row-start-{n}/end-{n}起止位置定位 Position
static/fixed/absolute/relative/sticky定位方式inset/t/r/b/l/x/y-{n}偏移量z-0/10/20/30/40/50/auto层级