Tailwind CSS 完整类名对照表（中文版）

Tailwind CSS 完整类名对照表中文版 本文基于 Tailwind CSS 官方文档及实战总结适合前端开发者快速查阅。 目录布局与容器类间距类尺寸类字体与文本类背景类边框类效果类交互与状态类响应式前缀暗色模式前缀颜色系统速查实战代码示例学习建议一、布局与容器类功能类名示例中文说明常用值宽度w-full宽度 100%w-1/2(50%),w-1/3(33.33%),max-w-3xl,min-w-0高度h-screen高度占满视口h-1/2(50%),h-[400px](自定义),min-h-screen居中mx-auto水平居中mx-automargin-left/right: autoFlex 布局flex开启弹性盒子items-center(垂直居中),justify-between(两端对齐),flex-col(垂直排列),gap-4(间距)Grid 布局grid开启网格grid-cols-3(3列),grid-rows-2(2行),gap-6(网格间距)定位relative,absolute,fixed相对/绝对/固定定位top-0,left-0,right-4,bottom-8显示block,inline-block,hidden显示方式hidden(隐藏),sm:block(小屏以上显示)二、间距类功能类名示例中文说明规则内边距p-4四边内边距 1rem (16px)p-2(0.5rem),p-8(2rem),px-4(左右),py-2(上下)外边距m-4四边外边距 1remmt-8(上边),mb-2(下边),ml-4(左边),mr-6(右边)负边距-mt-2负上边距在类名前加-如-mx-4间距gap-4Flex/Grid 子元素间距gap-2(0.5rem),gap-6(1.5rem)三、尺寸类功能类名示例中文说明最大/最小max-w-6xl,min-h-screen最大宽度/最小高度自定义w-[400px],h-[100svh]方括号写任意值比例w-1/2,h-1/3百分比宽度/高度四、字体与文本类功能类名示例中文说明常用值字号text-base基础字号 (16px)text-xs(12px),text-sm(14px),text-lg(18px),text-xl(20px),text-2xl-9xl字重font-bold粗体font-light,font-medium,font-semibold颜色text-gray-700灰色文字text-white,text-blue-600,text-red-500对齐text-center居中text-left,text-right,text-justify行高leading-relaxed宽松行高leading-tight,leading-snug,leading-normal装饰underline,line-through下划线/删除线no-underline,uppercase(大写)五、背景类功能类名示例中文说明常用值颜色bg-white白色背景bg-gray-50-900,bg-red-500,bg-blue-600透明度bg-black/50黑色 50% 透明/10,/25,/50,/75,/100渐变bg-gradient-to-r从左到右渐变from-blue-400,to-purple-500图片bg-cover,bg-center背景图覆盖/居中bg-no-repeat,bg-fixed六、边框类功能类名示例中文说明常用值边框border1px 边框border-2,border-t(上边框)颜色border-gray-200灰色边框border-blue-500,border-transparent(透明)圆角rounded-lg大圆角rounded(小),rounded-md(中),rounded-xl(特大),rounded-full(圆形)七、效果类功能类名示例中文说明备注阴影shadow-lg大阴影shadow(小),shadow-xl(特大),shadow-none模糊backdrop-blur毛玻璃效果需配合透明度使用溢出overflow-hidden隐藏溢出overflow-auto,overflow-scroll透明度opacity-5050% 透明opacity-0~opacity-100光标cursor-pointer手型光标cursor-default,cursor-not-allowed八、交互与状态类状态类名示例中文说明悬停hover:bg-gray-100鼠标悬停变灰色背景点击active:scale-95点击时缩小聚焦focus:ring-2聚焦时显示蓝色环禁用disabled:opacity-50禁用状态半透明过渡transition,duration-200200ms 平滑过渡九、响应式前缀前缀断点中文说明典型用法sm:≥640px小屏幕手机横屏sm:grid-cols-2md:≥768px中等屏幕平板md:text-xllg:≥1024px大屏幕电脑lg:flex-rowxl:≥1280px超大屏xl:max-w-7xl示例lt;div classNamegrid grid-cols-1 md:grid-cols-3 lg:grid-cols-4gt;→ 默认1列平板3列电脑4列十、暗色模式前缀前缀示例中文说明dark:dark:bg-zinc-900深色模式下背景变深灰dark:dark:text-white深色模式下文字变白十一、颜色系统速查Tailwind 提供10级灰度 8种常用色每色有 50~900 的亮度颜色示例用途灰度gray-50~gray-900文字、背景、边框主色blue-500,blue-600按钮、链接功能色red-500(红),green-500(绿),yellow-500(黄)成功、警告、错误透明度bg-blue-500/5050% 透明蓝色背景实战代码示例// Next.js Tailwind CSS 官网首页片段 export default function Home() { return ( lt;main classNamemin-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-centergt; lt;div classNamebg-white p-8 rounded-2xl shadow-xl hover:shadow-2xl transition-shadow duration-300 max-w-md w-full mx-4gt; lt;h1 classNametext-3xl font-bold text-gray-800 mb-4 text-centergt; 公司官网 lt;/h1gt; lt;p classNametext-gray-600 text-center leading-relaxedgt; 用 Tailwind CSS 构建响应式设计支持暗色模式 lt;/pgt; lt;button classNamemt-6 w-full bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 active:scale-95 transition-all duration-200 disabled:opacity-50gt; 了解更多 lt;/buttongt; lt;/divgt; lt;/maingt; ) }