Tailwind 的类名大多是 属性-值 的形式，响应式/状态前缀放在最前面（例如 md:text-lg、hover:bg-blue-600）。负值用前缀 -（例如 -mt-4）。任意值可用方括号：w-[300px]。

布局基础

• container — 居中并随着断点调整最大宽度（常用于页面容器）。 例如：<div class="container mx-auto">
• block / inline / inline-block — 显示类型。
• hidden — display: none;
• flex / inline-flex — flex 布局。
• grid / inline-grid — grid 布局。
• table / table-row / table-cell — 表格 display。
• order-1 / order-last — flex/grid 中的项顺序。

Flex / Grid 常用

• flex-row / flex-col — 主轴方向。
• flex-wrap / flex-nowrap — 换行。
• items-start items-center items-end items-stretch — 交叉轴对齐（align-items）。
• justify-start justify-center justify-between justify-around justify-evenly — 主轴对齐（justify-content）。
• gap-0 gap-1 gap-2 gap-4 gap-8 — 子元素间距，支持 gap-x-... / gap-y-...。
• grid-cols-1/2/3/4/5/6 — 列数（grid-cols-3）。
• col-span-2 / row-span-1 — 跨列/跨行。
• place-items-center / place-content-center — 进一步简写对齐。

间距（Margin / Padding）

• m-0 m-1 m-2 m-4 m-8 等 — 全边距（单位基于 Tailwind 预设 scale）。
• mt-4 mr-2 mb-6 ml-3 — 上右下左分别设。
• mx-auto — 左右自动（常用于水平居中）。
• px-4 py-2 — x/y 方向内边距。
• -mt-2 -mx-4 — 负 margin。
• space-x-4 / space-y-2 — 同胞元素之间的间隔（flex/grid 时非常常用）。

大小（宽高）

• w-full / h-full — 占父元素全部。
• w-screen / h-screen — 占可视窗口。
• w-auto / h-auto — 自动尺寸。
• w-1/2 w-1/3 w-2/3 — 百分比宽度。
• max-w-xs max-w-sm max-w-md max-w-lg max-w-2xl max-w-full — 最大宽度（常用于容器/卡片）。
• min-h-screen / min-w-0 / max-h-96。
• 任意值：w-[300px]、h-[50vh]。

排版（Typography）

• text-xs text-sm text-base text-lg text-xl text-2xl text-3xl 等 — 字号。
• font-thin font-light font-normal font-medium font-semibold font-bold font-extrabold font-black — 字重。
• font-sans font-serif font-mono — 字体族（基于 config）。
• text-left text-center text-right text-justify — 对齐。
• leading-none leading-tight leading-normal leading-loose — 行高（line-height）。
• tracking-tight tracking-wide — 字间距（letter-spacing）。
• truncate — 单行溢出省略号，常配 overflow-hidden whitespace-nowrap。
• whitespace-normal whitespace-nowrap break-words / break-all — 换行策略。
• text-gray-700 / text-white / text-red-500 — 文本颜色（颜色系列常见：gray/blue/red/green/yellow/pink/purple/... + shade）。

背景与颜色

• bg-white bg-black bg-gray-100 bg-gray-800 bg-blue-500 等 — 背景色。
• bg-gradient-to-r / bg-gradient-to-b + from- via- to- — 渐变背景（例如 bg-gradient-to-r from-blue-400 to-purple-600）。
• bg-cover bg-contain bg-center bg-no-repeat — 背景图控制。
• 透明度: opacity-100/75/50/25 或者颜色斜线写法（在新版本/JIT 下）如 bg-blue-500/50（带 alpha）。
• bg-transparent。

边框与圆角

• border / border-0 / border-2 / border-t / border-b — 边框宽度及方向。
• border-gray-200 / border-blue-500 — 边框颜色。
• rounded-none rounded-sm rounded rounded-md rounded-lg rounded-full — 圆角。
• ring-0 ring-1 ring-2 focus:ring-2 ring-blue-500 — ring（焦点环，常配合 forms/交互）。
• outline-none — 去默认外轮廓（注意可访问性）。

阴影与效果（Effects）

• shadow-sm shadow shadow-md shadow-lg shadow-xl — 盒阴影。
• shadow-none。
• filter blur-sm blur grayscale sepia contrast-125 saturate-150 等（需浏览器支持）。
• mix-blend-normal / mix-blend-multiply。
• drop-shadow（更适合图片/图标的阴影）。
• opacity-75 opacity-50 — 透明度。

定位与层级

• relative / absolute / fixed / sticky — 定位模式。
• top-0 left-0 right-0 bottom-0 / inset-0 / inset-y-0 / inset-x-0 — 定位偏移。
• z-0 z-10 z-20 z-50 — z-index。

溢出与滚动

• overflow-auto overflow-hidden overflow-visible overflow-scroll。
• overflow-x-auto / overflow-y-hidden。
• scrollbar-hide（需插件或自定义）。

交互、状态类（伪类）

• hover: 前缀（如 hover:bg-blue-600）
• focus:（如 focus:outline-none focus:ring-2 focus:ring-blue-400）
• active:（如 active:scale-95）
• disabled: visited: checked: first: last: odd: even: 等
• group + group-hover: 用于父子联动（例如 class="group" 的父元素下 group-hover:text-white）。

动画与变换（Transform / Transition / Animation）

• transform — 启用 transform（有些版本自动启用）。
• translate-x-2 / -translate-y-1 — 平移。
• scale-95 scale-100 scale-105 — 缩放。
• rotate-45 rotate-90 — 旋转。
• origin-center origin-top-left — 变换原点。
• transition / transition-colors / transition-transform — 启用过渡。
• duration-150 duration-300 — 持续时间（ms）。
• ease-in ease-out ease-in-out。
• animate-spin animate-pulse animate-bounce — 常用内置动画。

表单（常用）

• appearance-none — 去默认浏览器样式（input/select）。
• placeholder-gray-400 — placeholder 颜色。
• focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 — 焦点样式组合（常用于 input）。
• rounded-full px-3 py-2 border w-full — 常见 input 样式组合。

可访问性 & 实用小工具

• sr-only — 屏幕阅读器可见、视觉上隐藏（隐藏文本但对读屏器友好）。
• not-sr-only / visible。
• cursor-pointer cursor-not-allowed — 鼠标指针。
• select-none — 禁止文本选中。
• pointer-events-none — 禁止鼠标事件。
• list-disc list-decimal list-inside list-outside — 列表样式。

响应式前缀（常见断点）

• sm: md: lg: xl: 2xl: — 例如 md:flex（中等及以上屏幕显示 flex）。
• 可以组合：sm:text-sm md:text-base lg:text-lg。

组合/工程化常见写法（快捷记忆）

• mx-auto （水平居中）
• flex items-center justify-between （水平两端分布且垂直居中，常见 header）
• px-4 py-2 rounded-md shadow （简单按钮/卡片基座）
• grid grid-cols-3 gap-4 （三列网格）
• w-full max-w-3xl mx-auto （中间容器）

插件/扩展（可能不是默认）

• prose（typography 插件，适合论文/文章样式）。
• line-clamp-3（文本折叠插件，line-clamp）。
• aspect-w-16 aspect-h-9 / aspect-video（长宽比插件）。

这些需要在 tailwind.config.js 中开启或安装插件。

贡献者

yumengjh

更新日志

2025/9/14 13:55

查看所有更新日志

• 2cba4-Create TailWind.CSS.md于 2025/9/14