Tailwind CSS 速查表:100+ 工具类配实时预览

说明:四边内边距。刻度 4 = 1rem(16px)。每一档加 0.25rem,所以 p-1 = 4px,p-2 = 8px,p-4 = 16px,p-8 = 32px。

说明:水平内边距(左+右)和垂直内边距(上+下)分开写。最经典的按钮 padding 组合。

说明:单边内边距。变体:pt-(上)、pr-(右)、pb-(下)、pl-(左),以及 3.3+ 的逻辑属性 ps- / pe-。

说明:四边外边距。和 padding 同一套刻度。m-auto 让指定宽度的 block 居中。负边距写 -m-4。

说明:水平自动外边距，让指定宽度的 block 元素在父容器里左右居中。"页面居中"的标准套路。

说明:给相邻子元素加水平外边距(跳过第一个)。在 flex 布局里不写父级 gap 就给子元素加间距的标准套路。

说明:给上下堆叠的子元素加垂直外边距。搭配 flex flex-col 或普通 block 容器用。替代"除最后一个外都加 margin-bottom"的写法。

说明:flex / grid 子元素的间隙。比 space-x / space-y 更现代，两个方向都管,且不影响边缘子元素的外边距。

说明:1 像素内边距，最小的非零档位。1px 渐变描边、发丝细分割线、input 内部精细间距都用得到。

说明:零内边距，重置浏览器默认或覆盖继承的值。上游组件塞了 padding 但你不想要时的逃生通道。

说明:任意值，方括号语法绕开设计刻度写一个一次性的精确值。少用为妙,长期还是统一刻度赢。

说明:负外边距，按值往反方向拉。做重叠效果(头像组、徽章偏移、把卡片往 header 上提一截)。

说明:内联起始侧内边距,pl- 的逻辑属性版本,在 RTL 语言里自动翻到右边。ps- / pe- / ms- / me- 是写带方向间距时对国际化友好的工具类。

说明:翻转 space-x 把外边距加在哪一侧,容器是 flex-row-reverse 时必须配它,否则间距加错边。组合:flex flex-row-reverse space-x-4 space-x-reverse。

说明:只设列间距,控制 flex / grid 横向轨道之间的水平间隙,不动行间距。配 gap-y- 可以两个方向各自独立控制。

说明:scroll-margin-top,给锚点目标上方预留空间,跳转滚动后吸顶 header 不会盖住它。专治「#section 跳过去被固定导航栏挡住」这个老问题。

说明:段落首行缩进,设的是 text-indent。走 spacing 刻度,indent-8 = 2rem。也支持任意值 indent-[2ch],排印中文段落首行缩进两字符很常用。

说明:宽度 = 父容器的 100%。常用还有:w-1/2、w-1/3、w-2/3、w-1/4、w-screen(视口宽)、w-min、w-max、w-fit。

说明:固定高度,用 spacing 刻度。h-10 = 2.5rem(40px)。视口高:h-screen。最小内容:h-min。3.4+ 的 size-10 一次设宽高。

说明:Tailwind 3.4+ 简写,一次设宽和高，头像、图标、方形按钮场景,免得 w-8 h-8 写一百遍。

说明:把 min-width 重置为 0。修"flex 子元素不肯收缩、内容溢出"那个 bug，flex 子默认 min-width: auto,会阻止它收缩到比内容更窄。

说明:max-width 上限。命名刻度:sm(384)、md(448)、lg(512)、xl(576)、2xl…7xl、prose(65ch,适合阅读的行宽)、full、screen-md。"易读的正文栏"用 max-w-prose。

说明:宽度约 65 个字符，正文最舒服的行宽。文章 / 博客 / 文档正文栏用,宽屏上行不会拉得读不下去。

说明:高度 = 100vh(整个视口)。移动 Safari 上含地址栏区域,会跳一下。新写法 h-dvh(动态视口高)是更现代的解法。

说明:锁定宽高比。内置:aspect-square(1:1)、aspect-video(16:9)、aspect-auto。任意:aspect-[4/3]。img 上配 object-cover 做裁剪。

说明:分数宽度,w-1/2 就是 50%,刻度覆盖二分、三分、四分、五分、六分到十二分(w-1/12 … w-11/12)。在不用 grid 时把一行 flex 切成等比列的老办法。

说明:min-height: 100vh,内容很少时页面也至少占满整个视口,让页脚贴在底部。对移动地址栏更友好的现代写法是 min-h-dvh。

说明:max-height 上限,配 overflow-y-auto 做一个随内容增长、到顶后开始滚动的面板。下拉菜单、日志查看器的标准套路。

说明:width: fit-content,盒子收缩到刚好包住内容,但不超过父级。配 mx-auto w-fit 让一个 pill 或按钮行按内容自适应宽度并居中很方便。

说明:一个类把宽高都设成 100%(Tailwind 3.4+)。让 img 或 video 填满定位容器最干净的写法:absolute inset-0 size-full object-cover。

说明:flex-basis,设 flex item 在 grow / shrink 介入前的主轴初始尺寸。basis-1/3 约 33.3%,basis-64 走 spacing 刻度,basis-auto 按内容 / width 取。

说明:调色板里的背景色。格式:bg-{颜色}-{明度}。明度档:50 / 100 / 200 … 900 / 950。数字越小越浅。Tailwind 默认的 cyan 主色。

说明:调色板里的 violet。和 cyan 搭(冷+冷)出 Aurora 那种感觉,和 pink/rose 搭(冷+暖)做戏剧性渐变。

说明:Pink，Aurora 三主色(cyan / violet / pink)里的暖色锚。点缀用(CTA、高亮),整个 UI 全是 pink-500 会很快审美疲劳。

说明:Emerald，标准的"成功 / 积极"色。比 green-500 略冷;现代 UI 普遍偏好 emerald 而不是老的 green。

说明:Amber，标准的"警告"色。里面配 text-amber-50,旁边配 text-amber-900。同明度下比 yellow 更易读。

说明:Red，删除 / 错误色。按钮用 500,hover 用 600,轻量警示背景用 50 / 100,浅底深字用 700+。

说明:文字颜色。Slate 是最现代的中性色，比 gray 略冷,比 zinc 略暖。深色 UI 里 text-slate-400 是标准的"次要文字"色。

说明:纯白文字(#ffffff)。想要"带点暖意的近白"用 text-slate-50 或 text-zinc-50，长文阅读眼睛更舒服。

说明:边框颜色。必须配宽度类(border = 1px、border-2 = 2px)。不写宽度就不会出边框。常用:border border-slate-700。

说明:带透明度的颜色，/N 后缀设 alpha(0–100)。bg-cyan-500/20 就是 cyan-500 用 20% 透明度。bg-、text-、border-、ring-、divide- 等都支持。

说明:完全透明背景，清除父级样式、做"看不见但能点"的热区、hover 时清空背景,都用得到。

说明:黑色 40% 透明度，模态层遮罩 / scrim 的标准用法。比 bg-black/20 实(浅色页面会显不出来),比 bg-black/60 柔(悬浮工具栏不会糊脸)。

说明:Ring 是用 box-shadow 实现的"边框"，不占布局尺寸。做焦点环最合适:focus:ring-2 ring-cyan-500。配 ring-offset-2 做内嵌效果。

说明:Divide 工具类在相邻子元素之间加边线，divide-y 水平线、divide-x 垂直线。配 divide 颜色。不用再写 "last:border-b-0" 那种破套路。

说明:方括号语法写任意颜色，接 hex / rgb / oklch / var()。只在调色板真覆盖不到时用(品牌色、设计 token 桥接)。

说明:Sky,比沉静的 slate / indigo 更亮更饱和的蓝色,信息条和链接常用。在调色板上位于 cyan 和 blue 之间。

说明:Zinc,Tailwind 五套灰(gray、slate、zinc、neutral、stone)里最冷、最中性的一套。zinc-800 / 900 做暗色 UI 表面干净无偏色。

说明:渐变文字技巧:把渐变铺成背景,用 bg-clip-text 裁到字形上,再用 text-transparent 隐藏文字本身的填充色。配 bg-gradient-to-r from-X to-X 用。

说明:accent-color,给原生表单控件(复选框、单选、滑块、进度条)上色,不用自定义结构。accent-cyan-500 一个类就让选中的复选框变 cyan。由浏览器渲染,极轻量。

说明:caret-color,设 input 和 textarea 里闪烁文字光标的颜色。一个让品牌化输入框显得精致的小细节,和文字颜色相互独立。

说明:通过 placeholder: 变体给输入框的占位文字设样式。placeholder:text-slate-500 让提示文字比真实输入更暗。也能写 placeholder:italic、placeholder:text-sm。

说明:SVG fill 颜色,从调色板给内联 SVG 图标的填充上色。配 stroke-X 给描边图标用。fill-current 读取周围文字颜色,让图标自动继承。

说明:容器设为 display: flex。直接子元素变成 flex item,默认横排、纵向 stretch 对齐。80% 现代布局的起点。

说明:flex-direction: column，子元素纵向堆叠。配 items-x 控横向(交叉轴)对齐,justify-x 控纵向(主轴)对齐。

说明:align-items: center，交叉轴居中。flex-row 容器里是纵向居中,flex-col 容器里是横向居中。flex 里最常打的一个类。

说明:justify-content: space-between，首尾贴边,中间等距。"logo 左、菜单右"那种 header 的标准套路。

说明:flex: 1 1 0%，占满剩余,需要时收缩,忽略内在尺寸。"填满剩下的"用这个。flex-auto 保留内在尺寸,flex-initial 只收缩,flex-none 永不伸缩。

说明:flex-shrink: 0，容器变窄时不允许这个 item 收缩。给"绝对不能被挤扁"的图标 / 标签加,让旁边的文字去截断。

说明:flex-wrap: wrap，装不下时换行,而不是被挤扁。配 gap- 做"按宽度自适应的网格行"。默认是 nowrap。

说明:flex item 之间的间隙(grid 也用)。和 spacing 同一套刻度，gap-1 = 4px、gap-4 = 16px。大多数场景比 space-x / space-y 干净。

说明:align-self 个别覆盖，让单个 flex item 不跟随容器的 items-x。在 flex-col 卡片里把一个按钮顶到底部,其它都保持在上面。

说明:重排 flex item 的视觉顺序,不动 DOM。常用场景:手机和桌面下让两栏的视觉顺序对调(md:order-first)。

说明:justify-content: center,把子元素沿主轴向中间聚拢。flex items-center justify-center 组合就是一行实现「两个方向都居中」的经典写法。

说明:align-items: stretch,flex 的默认值,子元素沿交叉轴拉伸填满,让一行里的多列等高。不想拉伸时用 items-start 覆盖。

说明:align-content,控制换行后多行 flex / grid 之间的整体分布(只有 flex-wrap 多行时才生效)。和管单行内对齐的 items-center 不是一回事。

说明:flex-grow: 1,子元素扩张吃掉主轴剩余空间。grow-0 关闭增长。把 grow 加在工具栏中间那列,让它撑开两端固定尺寸之间的空隙。

说明:flex-direction: row-reverse,子元素从右往左排,DOM 顺序不变。RTL 场景镜像布局、或把主操作放到右侧时用得到。

说明:容器设为 display: grid。配 grid-cols-N 定义列数。grid 适合二维布局(行列都关键),一维布局用 flex。

说明:定义 3 个等宽列(1fr 1fr 1fr)。grid-cols-N 默认到 12。需要不等宽用 grid-cols-[200px_1fr] 任意值语法。

说明:显式定义行轨道。比 grid-cols 用得少，行通常按内容流动;需要明确行高(比如 dashboard 固定行高)时用。

说明:grid 子元素跨 2 列。col-span-full 占满整行。在 grid-cols-3 里做一个"宽格子"。

说明:任意 grid 模板，第一列 200px,第二列占剩下。"侧栏 + 正文"一行搞定。下划线代表空格。

说明:align-items + justify-items 的简写，每个 grid 单元里的子元素两个方向都居中。单元素居中最快的写法:grid place-items-center。

说明:隐式行尺寸，自动生成的每行各占可用高度的 1fr(等分)。配 grid-cols + 不等高内容,让行高保持对齐。

说明:item 优先按列填充而不是按行。"先横着排再下一行"的场景，横排键盘、按列排周的日历。

说明:subgrid,嵌套网格直接沿用父网格的列轨道而不是自己定义,让更深的子元素对齐到外层列。Tailwind 3.4+,只现代浏览器支持。

说明:让 grid 子元素从第 2 条网格线开始放。col-start-N 配 col-end-N 做显式定位,而不是靠自动流。col-start-2 col-end-4 占第 2、3 列。

说明:grid 子元素纵向跨 2 行,col-span 的纵向版本。配 col-span-2 在瀑布流式 dashboard 里做一个 2×2 的主格子。row-span-full 占满所有行。

说明:justify-items,设每个子元素在自己 grid 单元内的默认行内轴(水平)对齐。和分布整组轨道的 justify-content 不一样。

说明:响应式自动网格,列按最小 120px 自动填充,有空间就一起分摊撑满行。不写媒体查询,纯按可用宽度重排列。auto-fit 会折叠空轨道。

说明:font-size: 0.875rem(14px),行高 1.25rem。刻度:xs(12)、sm(14)、base(16)、lg(18)、xl(20)、2xl(24)、3xl(30)、4xl(36)、5xl(48)、6xl(60)、7xl(72)、8xl(96)、9xl(128)。

说明:font-weight: 700。刻度:thin(100)、extralight(200)、light(300)、normal(400)、medium(500)、semibold(600)、bold(700)、extrabold(800)、black(900)。字体必须真的带这个字重才会有效。

说明:line-height: 1.625，长文阅读最舒服。命名刻度:none(1)、tight(1.25)、snug(1.375)、normal(1.5)、relaxed(1.625)、loose(2)。UI 用 tight–normal,正文用 relaxed。

说明:letter-spacing 刻度:tighter(-0.05em)、tight(-0.025em)、normal(0)、wide(0.025em)、wider(0.05em)、widest(0.1em)。短句全大写时配 wide / wider 干净;正文不要用。

说明:text-align: center。变体:text-left、text-right、text-justify、text-start(逻辑)、text-end(逻辑)。RTL 友好的写法用 start / end。

说明:text-decoration: underline。可定制:decoration-{颜色}、decoration-2、underline-offset-4、decoration-wavy。配 hover:no-underline 做干净的链接交互。

说明:font-style: italic。重置用 not-italic。大多数 UI 字体的斜体视觉比加粗还重，节制用。

说明:text-transform: uppercase。其它:lowercase、capitalize、normal-case。uppercase 配 tracking-wide 做小标签 / 眉头文很合适。

说明:单行截断带省略号(overflow: hidden + text-overflow: ellipsis + whitespace: nowrap)。元素要有明确宽度,或父级 flex / grid 配 min-w-0。

说明:多行截断，显 N 行,后面省略号。替代老的 -webkit-line-clamp 那一套破写法。line-clamp-none 解除限制。

说明:text-wrap: balance，浏览器自动平衡各行长度,标题更好看(不留孤行)。h1 / h2 / hero 文案最合适。text-pretty 是给正文用的温和版(只现代浏览器支持)。

说明:等宽字体栈，代码、数字、表格数据。配 text-xs / text-sm 显代码片段。自定义等宽字体走 theme(比如 JetBrains Mono)。

说明:white-space: nowrap,文字强制单行不换行。truncate 里负责「不折行」的那一半,配 overflow-hidden + text-ellipsis 才是完整截断。whitespace-pre 会保留原始空格和换行。

说明:overflow-wrap: break-word,让 URL、哈希这类长串在盒子内换行而不是溢出。break-all 更激进逐字符断,break-keep 避免拆开中日韩词。

说明:font-variant-numeric: tabular-nums,每个数字等宽,数字列能对齐。表格、计时器、计数器里数字跳变时不抖动,靠它。同族还有 lining-nums、slashed-zero。

说明:vertical-align: middle,让内联 / inline-block 元素(比如图标)对齐到周围文字的中线。专治标签旁边 SVG 图标偏低的老问题。

说明:text-decoration-color,给下划线 / 删除线单独上色,和文字颜色独立。配 underline decoration-2 underline-offset-4 做不蹭到字母下伸部的品牌化链接下划线。

说明:list-style-type: disc,恢复圆点项目符号(Tailwind 的 preflight 把列表样式重置成了 none)。配 list-inside / list-outside 控制标记位置。list-decimal 是有序数字列表。

说明:-webkit-font-smoothing: antialiased,在 WebKit / macOS 上把文字渲染得更细更顺,深底浅字 UI 常偏好它。subpixel-antialiased 恢复默认更锐利的渲染。

说明:中等宽度起(≥ 768px)用 flex-row。Tailwind 是 移动优先:不写前缀 = 所有宽度,sm: = ≥ 640,md: = ≥ 768,lg: = ≥ 1024,xl: = ≥ 1280,2xl: = ≥ 1536。

说明:≥ 640 起隐藏，只在小于 640 的屏显示。反过来"只桌面显示":hidden md:block(默认隐藏,从 md 起显示)。

说明:lg 宽度起字号跳到 2xl。响应式标题标准套路:text-2xl md:text-3xl lg:text-4xl,各设备都好看。

说明:md 起切到 2 列网格。手机堆叠(无前缀),平板 2 列(md:),桌面 3 列(lg:)，响应式卡片网格的标准套路。

说明:内边距随视口缩放，手机紧凑,桌面宽松。套路:p-4 sm:p-6 lg:p-8。

说明:Tailwind 3.2+ 的 "max-" 前缀，直到这个断点之前生效(手机专属覆盖)。max-sm:flex-col = "小于 sm 时纵向排"。需要反过来移动优先时用。

说明:链式响应式覆盖，垂直 padding 三档缩放。是按"前缀越大优先级越高"吗?不,按 CSS 中的 顺序。Tailwind 自动把更大的断点排在后面。

说明:Tailwind 4 容器查询，父级标 @container,子元素用 @sm: @md: @lg: 前缀,按 父级 宽度响应而不是视口。装在侧栏 / 单元格里的组件神器。

说明:print: 变体,只在打印(或导出 PDF)时生效。print:hidden 把导航 / 按钮从打印件里去掉,print:block 显示只在打印时出现的页眉。它是真正的媒体查询,不是断点。

说明:方向变体,portrait: 在设备高大于宽时生效,landscape: 在宽大于高时生效。对会旋转的平板和手机有用,和像素断点相互独立。

说明:任意断点,min-[900px]: 在任意自定义 min-width 处生效,不用注册命名断点。给 md 和 lg 之间临时加一个断点用。max-[480px]: 是上界的孪生写法。

说明:文字方向变体,rtl: 在 dir="rtl" 下生效,ltr: 在从左到右下生效。给阿拉伯语 / 希伯来语布局翻转箭头或调整文字方向,不用复制组件。

说明:把 CSS @supports 特性查询当变体用,只在浏览器支持该属性时生效。supports-[backdrop-filter]: 让支持的浏览器拿到毛玻璃效果,其余拿到实色回退。

说明:鼠标悬停时换背景。可叠:hover:bg-cyan-600 hover:text-white hover:scale-105。触屏设备点一下也会短暂触发 hover，做动画时记住这点。

说明:加一个焦点环(box-shadow)。配 focus:outline-none 去掉浏览器默认,加 ring-cyan-500 / ring-offset-2 调样式。a11y 建议优先用 focus-visible:。

说明:只对键盘聚焦显示焦点环，鼠标点击不出,键盘 Tab 出。a11y 正确的焦点样式写法。应该作为 focus: 的默认替代。

说明:按下时(鼠标或触摸)的样式。active:scale-95 配 transition 给按钮做出"被按下"的手感,不用写 keyframes。

说明:元素带 [disabled] 属性时生效。标准组合:disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none。

说明:祖先有 class="group" 且被 hover 时给子元素加样式。父级加 `group`,子孙用 `group-hover:`。经典套路:hover 卡片时箭头图标滑动。

说明:兄弟元素驱动，带 class="peer" 的兄弟元素 :checked 时给这个元素加样式。纯 CSS 自定义复选框 / 开关的写法:把原生 input 设为 peer 隐藏,样式打在下一个 div 上。

说明:暗色模式下生效。在 CSS 里配 dark 模式策略:类策略用 @custom-variant dark (&:where(.dark, .dark *)),否则默认 media query。然后每条亮色样式都配一个 dark: 覆盖。

说明:用户开启了 prefers-reduced-motion 时生效。用来关动画 / 过渡保 a11y。反过来"只在用户允许动画时跑"用 motion-safe:。

说明:Tailwind 3.2+，按 ARIA 属性加样式。内置:aria-checked、aria-disabled、aria-expanded、aria-hidden、aria-pressed、aria-readonly、aria-required、aria-selected。自定义:aria-[sort=ascending]:。

说明:按 data-* 属性值加样式。和 headless UI 库(Radix、Headless UI、Ariakit)对接的桥，它们把状态暴露在 data 属性上:data-state="open"、data-side="bottom"。

说明:Tailwind 3.4+，:has() 父级选择器。后代匹配时给父级加样式。has-[:checked]:bg-cyan-500/10 = "里面的复选框选中时给卡片上色"。只现代浏览器支持。

说明:通过 :first-child 命中第一个子元素。first:pt-0 / last:pb-0 修掉分隔列表最外侧的内边距,或 first:rounded-t-lg last:rounded-b-lg 只给堆叠两端加圆角。

说明:斑马纹,odd: / even: 通过 :nth-child 命中交替子元素。odd:bg-slate-800/40 隔行给表格上色,不用 JavaScript,也不用记索引。

说明:group 上的 :focus-within,group 容器内任意元素获得焦点时给子孙加样式。套路:输入框容器持有焦点时才显示清除按钮。

说明:浮动标签技巧,peer-placeholder-shown: 在 peer 输入框仍显示占位文字(空)时命中标签兄弟元素。配 peer-focus: 让用户开始输入后标签上浮。

说明:表单校验伪类,invalid: 给不满足 HTML 约束(type=email、required、pattern)的输入框加样式。配 valid:border-emerald-500 做实时内联反馈,不用 JS。

说明:元素自身的 :checked 变体,复选框 / 单选选中时给它加样式。配 appearance-none 把原生控件完全重塑成自定义开关。

说明::target 变体,命中 id 和当前 URL 哈希匹配的元素。target:ring-2 ring-cyan-500 高亮你刚从同页锚点跳过去的那一节。纯 CSS,无 JS。

说明:Tailwind 3.4+ 的 not-* 变体,对另一个变体取反。not-first:border-t 给除第一个外的每个子元素加顶边,比老的 [&:not(:first-child)] 任意选择器干净。

说明:box-shadow 刻度:shadow-sm、shadow(默认)、shadow-md、shadow-lg、shadow-xl、shadow-2xl、shadow-inner、shadow-none。带颜色:shadow-cyan-500/40 给阴影上色。

说明:border-radius 刻度:rounded-none、rounded-sm(2px)、rounded(4)、rounded-md(6)、rounded-lg(8)、rounded-xl(12)、rounded-2xl(16)、rounded-3xl(24)、rounded-full(9999px)。单边:rounded-t-lg、rounded-l-lg。

说明:border-radius: 9999px，完全圆角。方形元素变圆形,长条变胶囊。头像 / chip / pill 的标准用法。

说明:opacity 刻度:0、5、10、20、25、30、40、50、60、70、75、80、90、95、100。opacity-50 = 0.5。会影响整个元素含子级，只想给单个属性上透明度用颜色的 /N(bg-cyan-500/50)。

说明:CSS 模糊滤镜。刻度:blur-none、blur-sm(4px)、blur(8)、blur-md(12)、blur-lg(16)、blur-xl(24)、blur-2xl(40)、blur-3xl(64)。给背景 / 装饰圆球用,不要给文字用。

说明:模糊元素 后面 的内容，iOS / macOS 的毛玻璃效果。配 bg-white/10 或 bg-black/30 做经典玻璃卡片。性能开销大，节制用。

说明:色彩相关属性的平滑过渡。变体:transition(全部)、transition-all、transition-colors、transition-opacity、transition-shadow、transition-transform。配 duration-N 和 ease-N。

说明:过渡时长(ms)。常用刻度:75、100、150、200、300、500、700、1000。只写 `transition` 时默认 150ms。UI 反馈 < 200ms 灵敏,> 400ms 显迟钝。

说明:内置 keyframe 动画，透明度脉冲。内置:animate-spin、animate-ping、animate-pulse、animate-bounce、animate-none。自定义:定义 @keyframes + @theme 扩展。

说明:360 度旋转循环,1 秒 linear 无限。标准的加载指示器，一个圆形 SVG 套这个类就是 spinner。

说明:带颜色的阴影,阴影按指定透明度染上调色板颜色。shadow-lg shadow-cyan-500/40 在暗色 UI 上给卡片做发光式抬升。任意 shadow 尺寸类都能配。

说明:ring-offset,在元素和它的 ring 之间插入一段(用 ring-offset 颜色,默认背景色)间隙,让 ring 浮在边缘外侧。精致焦点环写法:ring-2 ring-cyan-500 ring-offset-2 ring-offset-slate-900。

说明:filter: grayscale(100%),把元素去色变黑白。配 hover:grayscale-0 让 logo 悬停时上色。同族滤镜:sepia、invert、brightness-N、contrast-N、saturate-N。

说明:filter: brightness(),缩放亮度。brightness-110 提亮 10%,brightness-90 压暗。给图片做悬停提亮最省事、对 GPU 友好,不用换图。

说明:filter: drop-shadow,和 box-shadow 不同,它跟随元素真实的 alpha 形状,所以能给透明 PNG 和 SVG 图标正确投影。刻度:drop-shadow-sm … drop-shadow-2xl。

说明:mix-blend-mode,把元素和它后面的内容混合。screen 提亮(暗背景上做发光球很合适),multiply 压暗,overlay 增对比。全屏尺寸下吃 GPU。

说明:transform: scale,scale-105 放大到 105%,scale-95 缩小。悬停抬升 / 按下回弹的标准写法:hover:scale-105 active:scale-95 transition-transform。还有单轴的 scale-x-、scale-y-。

说明:transform: rotate,单位度。rotate-45 倾斜 45°,-rotate-45 反向。配 transition-transform 做展开/收起的旋转箭头、倾斜徽章。刻度:0、1、2、3、6、12、45、90、180。

说明:cursor,鼠标指针形状。可点击的非按钮元素用 cursor-pointer,禁用用 cursor-not-allowed,拖拽 UI 用 cursor-grab / cursor-grabbing,加载中用 cursor-wait。

说明:position: absolute，脱离正常流,相对最近的"定位过的"祖先定位。配 top-N / right-N / bottom-N / left-N 或 inset-N。

说明:position: relative，仍在正常流,但成为子元素 absolute 定位的参照系。最常见套路:父级 relative,装饰用子级 absolute。

说明:position: fixed，相对视口,不随滚动。导航 header、悬浮按钮、模态层都用。fixed inset-0 = 全屏覆盖层。

说明:position: sticky，元素正常流动,到达 offset(这里是 top-0)后吸住。需要可滚动的父级。表头、章节导航、吸顶 CTA 都用。

说明:top-0 right-0 bottom-0 left-0 的简写，让 absolute / fixed 元素拉满父级 / 视口。"做个全屏覆盖层"用这个。

说明:定位元素的偏移。关闭按钮标准套路:absolute top-2 right-2。负值做悬挂效果:-top-2 -right-2 把元素拉到角外。

说明:z-index 刻度:z-0、z-10、z-20、z-30、z-40、z-50、z-auto。Tailwind 故意把刻度压低，大多数页面别超 z-50。模态 z-50、下拉 z-40、吸顶 header z-30。

说明:裁掉框外内容。配 rounded-* 做圆角图片 / 卡片(否则内部内容会盖住圆角)。还有:overflow-auto、overflow-x-scroll。

说明:left-0 right-0 的简写,把定位元素横向拉满整宽,垂直偏移保持自由。套路:absolute inset-x-0 bottom-0 做横跨父级的底栏。

说明:isolation: isolate,新建一个层叠上下文,让这个元素内部的 z-index 不和页面其余部分打架。专治「模态的 z-50 和兄弟元素的 z-index 互相干扰」。

说明:object-fit: cover,img / video 填满盒子并裁掉溢出,保持宽高比。object-contain 完整显示(可能留黑边),object-fill 拉伸。配 object-center 控制裁剪焦点。

说明:float: right,让文字环绕浮动元素,经典的杂志引文 / 内嵌图片排版。下方用 clear-both 清除浮动。在应用 UI 里少见,排正文时仍有用。

说明:position: static,默认值,元素忽略 top / left / z-index,留在正常流里。用来显式重置上层设的定位(比如 md:static 在桌面取消一个 absolute)。

说明:线性渐变方向。变体:-t、-tr、-r、-br、-b、-bl、-l、-tl。配 from-X to-X(可选 via-X)设色标。Tailwind 4 加了角度语法 bg-linear-45。

说明:渐变起点颜色。配 bg-gradient-to-* 和 to-X。可选位置:from-cyan-500 from-10% 让 cyan 色标从 10% 处开始。via- 和 to- 同理。

说明:渐变中间色标(可选)，做三色渐变(from → via → to)。Aurora 经典渐变:from-cyan-500 via-violet-500 to-pink-500。

说明:渐变终点颜色。组合:bg-gradient-to-r from-cyan-500 to-pink-500。"渐变到透明"用 to-transparent，做文字边缘渐隐、图片暗角很常用。

说明:background-size: cover，图片填满容器,可能被裁。其它:bg-contain(完整显示,可能留白)、bg-auto(原始尺寸)。配 bg-center 做 hero 大图。

说明:任意背景图，方括号语法接 url() / linear-gradient() / radial-gradient() 任意值。做噪点纹理、网点底、超出命名刻度的自定义渐变。

说明:background-attachment: fixed,背景图固定在视口上,内容从它上面滚过,做视差 hero 效果。bg-local 随元素自身内容滚,bg-scroll 随页面滚。

说明:background-repeat: no-repeat,背景图只显示一次而不平铺。bg-repeat-x 只横向平铺,bg-repeat-round / bg-repeat-space 调整平铺副本之间的间距。

说明:background-origin,设背景定位的参照盒:border、padding(默认)或 content。bg-origin-border 让背景图延伸到边框下方,做满出血渐变描边时有用。

说明:background-position,锚定背景图位置。bg-center 最常用;bg-left-top、bg-right-bottom、bg-top 等覆盖九宫格。配 bg-cover 做偏向某个角的 hero 裁剪。

说明:Tailwind 4 的 CSS 优先配置，在 CSS 里直接声明 theme token。替代 tailwind.config.js。会自动生成变量:颜色 --color-X、字体 --font-X、间距 --spacing-X。

说明:CSS 里读 theme token 的函数。theme(colors.cyan.500) 返回 cyan-500 的值。任意值上下文里用:shadow-[0_4px_8px_theme(colors.cyan.500/40)]。

说明:Tailwind 4 用 oklch 色彩空间，色域更广,渐变更顺,亮度更均匀。老的 hex / rgb 自动换算;类名写法不变。

说明:容器查询内置(不再需要插件)。父级标 @container,子元素用 @sm: @md: @lg: 按父级宽度响应。命名容器:@container/sidebar 让更深的子级用 @sm/sidebar: 精确指定要响应的祖先。

说明:容器查询断点，父级 @container 达到 ≥ sm(默认 640px)时生效。和 sm: 类似,但驱动条件是 父级 宽度而不是视口。同一个组件在不同尺寸下复用的神器。

说明:Tailwind 3.4+ 的 size 简写，同时设宽和高。size-8 就是 w-8 h-8。图标、头像、圆点免得同一个数字写两遍。组件 PR 里少一半的 diff。

说明:Tailwind 4 的 3D 变换，沿 X、Y、Z 轴旋转。父级要配 perspective-N + transform-3d 启用。translate-z-N 朝/离视线方向移。

说明:Tailwind 4，通过 CSS @starting-style 加样式。元素首次出现时,这些样式作为过渡的起始帧。不写 keyframes 就让元素 出场 动画的 CSS 原生写法。

说明:Tailwind 4 把 bg-gradient-to-r 改名为 bg-linear-to-r,并加了 bg-radial / bg-conic。角度成了一等公民:bg-linear-45 设 45° 线性渐变。from-/via-/to- 色标用法不变。

说明:Tailwind 4 的 CSS 变量简写,text-(--brand) 直接读自定义属性,不用啰嗦的 text-[var(--brand)] 方括号写法。任意取值槽都行:bg-(--surface)、w-(--sidebar)。

说明:Tailwind 4 把 not-* 变体泛化,可以对任意变体内联取反。not-hover:opacity-60 让元素在非悬停时变暗,not-supports-[grid]:block 给不支持 grid 的浏览器回退。比任意 :not() 选择器干净。

说明:Tailwind 4 包装的 CSS field-sizing,textarea 不用 JS 监听就能随内容自动长高。textarea 加 field-sizing-content,输入时自己撑开。field-sizing-fixed 恢复常规行为。

说明:Tailwind 4 把内阴影拆成独立刻度,inset-shadow-sm / inset-shadow / inset-shadow-lg,外加 inset-ring-N。它们和外层 shadow-* 各自独立叠加,按钮可以同时有外抬升和内凹陷。

说明:Tailwind 4 包装的 transition-behavior: allow-discrete,让 display 这类离散属性也能参与过渡。配 starting:opacity-0 和 display 切换,不用 JS 就能让元素从 display:none 淡入淡出。

说明:Tailwind 4 映射 color-scheme,scheme-dark / scheme-light 告诉浏览器用哪套原生 UI(滚动条、表单控件、默认色)。暗色页面设 scheme-dark,滚动条就跟着变暗而不是停留在亮色。