Tailwind CSS 常用Class样式速查指南

yvsm5个月前 (12-05)前端开发17720

一、布局与尺寸控制类

用于快速定义元素宽高、内外边距、定位、弹性布局等基础布局样式，是Tailwind最核心的使用场景之一。

功能分类	常用Class	说明
宽高控制	w-20、h-16、w-1/2、h-full	固定尺寸（w-20对应宽度5rem）、比例尺寸（w-1/2占父元素50%）、满尺寸（h-full占父元素100%高度）
	w-screen、h-screen	宽度/高度占满整个屏幕
	min-w-[200px]、max-h-[500px]	自定义最小宽/最大高（方括号支持任意数值）
内外边距	p-4、px-6、py-3	p=内边距，x=横向（左右），y=纵向（上下）；p-4对应1rem内边距
	m-5、mx-auto、mb-8	m=外边距，mx-auto实现水平居中，mb-8=底部外边距2rem
	pt-2、pb-3、pl-4、pr-5	单独控制上/下/左/右内边距
	mt-2、mb-3、ml-4、mr-5	单独控制上/下/左/右外边距
定位	relative、absolute、fixed、sticky	相对定位、绝对定位、固定定位、粘性定位
	top-4、bottom-2、left-0、right-0	配合定位控制元素偏移量
	z-10、z-20、z-50	控制元素层级（数值越大层级越高）
弹性布局	flex、inline-flex	启用弹性布局
	flex-col、flex-row、flex-wrap	列排列、行排列、自动换行
	justify-center、justify-between、justify-around	主轴方向居中、两端对齐、均匀分布
	items-center、items-start、items-end	交叉轴方向居中、顶部对齐、底部对齐
网格布局	grid、grid-cols-3、gap-4	启用网格布局、3列网格、网格间距1rem
显示控制	block、inline、inline-block、hidden	块级显示、行内显示、行内块、隐藏元素

示例：居中卡片布局

<div class="flex justify-center items-center min-h-screen bg-gray-100">
    <div class="w-96 h-64 bg-white rounded-lg shadow-md p-6">
        居中显示的卡片
    </div>
</div>

二、样式美化类

涵盖文字、颜色、边框、阴影、背景等视觉样式，支持主题色和自定义数值，快速美化元素外观。

功能分类	常用Class	说明
文字样式	text-xl、text-2xl、text-sm、text-xs	字号控制（xl=1.25rem，2xl=1.5rem，sm=0.875rem，xs=0.75rem）
	font-bold、font-medium、font-normal	字重（粗体、中等、常规）
	text-center、text-left、text-right	文字对齐方式
	text-gray-600、text-blue-500、text-primary	文字颜色（支持预设色值/自定义主题色）
背景样式	bg-white、bg-gray-100、bg-blue-600	背景色（支持预设色值）
	bg-primary/10、bg-blue-500/80	带透明度的背景色（/后为透明度百分比）
	bg-cover、bg-center、bg-no-repeat	背景图片覆盖、居中、不重复
边框与圆角	border、border-gray-200、border-b-2	启用边框、边框颜色、仅底部边框（2px宽）
	rounded、rounded-lg、rounded-xl、rounded-full	圆角（rounded=0.25rem，lg=0.5rem，xl=0.75rem，full=圆形）
	rounded-t-lg、rounded-b-none	仅顶部圆角、取消底部圆角
阴影	shadow-sm、shadow、shadow-md、shadow-lg	不同层级的盒子阴影（sm=小阴影，lg=大阴影）
阴影	shadow-inner、shadow-blue-200	内阴影、指定颜色的阴影
圆角图片	object-cover、rounded-full、overflow-hidden	图片裁剪、圆形显示、隐藏溢出内容

示例：美化按钮样式

<button class="px-4 py-2 bg-blue-600 text-white rounded-md shadow-md hover:bg-blue-700 transition-colors">
    提交按钮
</button>

三、响应式设计类

通过断点前缀实现不同屏幕尺寸的样式适配，是移动端/PC端适配的核心用法。

断点前缀	屏幕宽度	常用示例	说明
sm	≥640px	sm:w-1/2、sm:flex	小屏手机及以上生效
md	≥768px	md:w-1/3、md:hidden	平板及以上生效
lg	≥1024px	lg:w-1/4、lg:block、hidden lg:block	大屏平板/笔记本及以上生效（最常用）
xl	≥1280px	xl:w-1/5、xl:mt-8	桌面显示器及以上生效
2xl	≥1536px	2xl:text-3xl、2xl:px-10	超大屏显示器及以上生效

示例：响应式侧边栏（手机端隐藏）

<!-- 手机端隐藏，大屏占1/4宽度显示 -->
<div class="hidden lg:block lg:w-1/4">
    <div class="bg-white rounded-2xl shadow-md p-6 sticky top-28">
        侧边栏内容
    </div>
</div>

<!-- 手机端占满宽度，大屏占3/4宽度 -->
<div class="w-full lg:w-3/4 p-4">
    主内容区域
</div>

四、交互与状态类

控制元素在不同状态下的样式，如悬停、焦点、禁用等，提升交互体验。

状态类型	常用Class	说明
悬停状态	hover:bg-gray-50、hover:text-blue-600、hover:shadow-lg	鼠标悬浮时触发样式
焦点状态	focus:outline-none、focus:ring-2、focus:ring-blue-400	元素获取焦点时触发（如输入框）
禁用状态	disabled:bg-gray-300、disabled:cursor-not-allowed、disabled:text-gray-500	元素禁用时的样式
激活状态	active:bg-blue-700、active:scale-95	元素被点击时的样式
过渡动画	transition、transition-colors、transition-all duration-300	启用过渡动画、仅颜色过渡、动画时长300ms
光标样式	cursor-pointer、cursor-default、cursor-not-allowed	指针光标、默认光标、禁用光标
缩放效果	hover:scale-105、scale-90、hover:scale-95	悬停放大、默认缩小、悬停缩小

示例：带交互效果的导航链接

<a href="#" class="px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded-md transition-colors cursor-pointer">
    导航链接
</a>

五、高频组合类（实战常用）

整理日常开发中高频使用的样式组合，直接复用可大幅提升效率。

使用场景	Class组合	说明
圆形头像	w-24 h-24 rounded-full overflow-hidden object-cover	固定尺寸、圆形显示、图片裁剪
粘性导航	sticky top-0 z-50 bg-white shadow-md	顶部粘性定位、高层级、白色背景+阴影
居中容器	max-w-7xl mx-auto px-4 sm:px-6 lg:px-8	最大宽度、水平居中、响应式内边距
弹性居中	flex justify-center items-center	快速实现元素水平+垂直居中
卡片容器	bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow	基础卡片样式+悬停阴影放大
表单输入框	w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400	适配性输入框+焦点样式