Tailwind CSS 备忘清单 === 使用此交互式备忘单快速查找所有类名和 CSS 属性 Layout --- ### Aspect Ratio 用于控制元素纵横比的实用程序 :-- | -- :-- | -- `aspect-auto` | aspect-ratio: auto; `aspect-square` | aspect-ratio: 1 / 1; `aspect-video` | aspect-ratio: 16 / 9; --- ```html ``` ### Container 设置最大宽度以匹配当前断点的最小宽度 :-- | -- | -- :-- | -- | -- container | none | width: 100% | | sm (640px) | max-width: 640px; | | md (768px) | max-width: 768px; | | lg (1024px) | max-width: 1024px; | | xl (1280px) | max-width: 1280px; | | 2xl (1536px) | max-width: 1536px; --- ```html
``` ### Columns 用于控制元素中列数的实用程序 :-- | -- :-- | -- `columns-1` | columns: 1; `columns-2` | columns: 2; `columns-3` | columns: 3; `columns-4` | columns: 4; `columns-5` | columns: 5; `columns-6` | columns: 6; `columns-7` | columns: 7; `columns-8` | columns: 8; `columns-9` | columns: 9; `columns-10` | columns: 10; `columns-11` | columns: 11; `columns-12` | columns: 12; `columns-auto` | columns: auto; `columns-3xs` | columns: 16rem; /*256px*/ `columns-2xs` | columns: 18rem; /*288px*/ `columns-xs` | columns: 20rem; /*320px*/ `columns-sm` | columns: 24rem; /*384px*/ `columns-md` | columns: 28rem; /*448px*/ `columns-lg` | columns: 32rem; /*512px*/ `columns-xl` | columns: 36rem; /*576px*/ `columns-2xl` | columns: 42rem; /*672px*/ `columns-3xl` | columns: 48rem; /*768px*/ `columns-4xl` | columns: 56rem; /*896px*/ `columns-5xl` | columns: 64rem; /*1024px*/ `columns-6xl` | columns: 72rem; /*1152px*/ `columns-7xl` | columns: 80rem; /*1280px*/ ### Break After 用于控制列或页面应如何在元素后断开的实用程序 :-- | -- :-- | -- `break-after-auto` | break-after: auto; `break-after-avoid` | break-after: avoid; `break-after-all` | break-after: all; `break-after-avoid-page` | break-after: avoid-page; `break-after-page` | break-after: page; `break-after-left` | break-after: left; `break-after-right` | break-after: right; `break-after-column` | break-after: column; ### Break Before 用于控制列或页面在元素之前应如何中断的实用程序 :-- | -- :-- | -- `break-before-auto` | break-before: auto; `break-before-avoid` | break-before: avoid; `break-before-all` | break-before: all; `break-before-avoid-page` | break-before: avoid-page; `break-before-page` | break-before: page; `break-before-left` | break-before: left; `break-before-right` | break-before: right; `break-before-column` | break-before: column; ### Break Inside 用于控制列或页面在元素内的拆分方式的实用程序 :-- | -- :-- | -- `break-inside-auto` | break-inside: auto; `break-inside-avoid` | break-inside: avoid; `break-inside-avoid-page` | break-inside: avoid-page; `break-inside-avoid-column` | break-inside: avoid-column; ### Box Decoration Break 用于控制应如何跨多行、多列或多页呈现元素片段的实用程序 :-- | -- :-- | -- `box-decoration-clone` | box-decoration-break: clone; `box-decoration-slice` | box-decoration-break: slice; ### Box Sizing 用于控制浏览器应如何计算元素总大小的实用程序 :-- | -- :-- | -- `box-border` | box-sizing: border-box; `box-content` | box-sizing: content-box; ### Display 用于控制元素显示框类型的实用程序 :-- | -- :-- | -- `block` | display: block; `inline-block` | display: inline-block; `inline` | display: inline; `flex` | display: flex; `inline-flex` | display: inline-flex; `table` | display: table; `inline-table` | display: inline-table; `table-caption` | display: table-caption; `table-cell` | display: table-cell; `table-column` | display: table-column; `table-column-group` | display: table-column-group; `table-footer-group` | display: table-footer-group; `table-header-group` | display: table-header-group; `table-row-group` | display: table-row-group; `table-row` | display: table-row; `flow-root` | display: flow-root; `grid` | display: grid; `inline-grid` | display: inline-grid; `contents` | display: contents; `list-item` | display: list-item; `hidden` | display: none; ### Float 用于控制元素周围内容包装的实用程序 - float-right - float-left - float-none ### Clear 用于控制元素周围内容包装的实用程序 - clear-left - clear-right - clear-both - clear-none ### Isolation 用于控制元素是否应显式创建新的堆叠上下文的实用程序 :-- | -- :-- | -- isolate | isolation: isolate; isolation-auto | isolation: auto; ### Object Fit 用于控制如何调整替换元素内容大小的实用程序 - object-contain - object-cover - object-fill - object-none - object-scale-down ### Top/Right/Bottom/Left 用于控制定位元素放置的实用程序 - inset-0 - inset-x-0 - inset-y-0 - top-0 - right-0 - bottom-0 - left-0 - inset-px - inset-x-px - inset-y-px - top-px - right-px - bottom-px - left-px - inset-0.5 - inset-x-0.5 - inset-y-0.5 - top-0.5 - right-0.5 - bottom-0.5 - left-0.5 - inset-1 - inset-x-1 - inset-y-1 - top-1 - right-1 - bottom-1 - left-1 - inset-1.5 - inset-x-1.5 - inset-y-1.5 - top-1.5 - right-1.5 - bottom-1.5 - left-1.5 - inset-2 - inset-x-2 - inset-y-2 - top-2 - right-2 - bottom-2 - left-2 - inset-2.5 - inset-x-2.5 - inset-y-2.5 - top-2.5 - right-2.5 - bottom-2.5 - left-2.5 - inset-3 - inset-x-3 - inset-y-3 - top-3 - right-3 - bottom-3 - left-3 - inset-3.5 - inset-x-3.5 - inset-y-3.5 - top-3.5 - right-3.5 - bottom-3.5 - left-3.5 - inset-4 - inset-x-4 - inset-y-4 - top-4 - right-4 - bottom-4 - left-4 - inset-5 - inset-x-5 - inset-y-5 - top-5 - right-5 - bottom-5 - left-5 - inset-6 - inset-x-6 - inset-y-6 - top-6 - right-6 - bottom-6 - left-6 - inset-7 - inset-x-7 - inset-y-7 - top-7 - right-7 - bottom-7 - left-7 - inset-8 - inset-x-8 - inset-y-8 - top-8 - right-8 - bottom-8 - left-8 - inset-9 - inset-x-9 - inset-y-9 - top-9 - right-9 - bottom-9 - left-9 - inset-10 - inset-x-10 - inset-y-10 - top-10 - right-10 - bottom-10 - left-10 - inset-11 - inset-x-11 - inset-y-11 - top-11 - right-11 - bottom-11 - left-11 - inset-12 - inset-x-12 - inset-y-12 - top-12 - right-12 - bottom-12 - left-12 - inset-14 - inset-x-14 - inset-y-14 - top-14 - right-14 - bottom-14 - left-14 - inset-16 - inset-x-16 - inset-y-16 - top-16 - right-16 - bottom-16 - left-16 - inset-20 - inset-x-20 - inset-y-20 - top-20 - right-20 - bottom-20 - left-20 - inset-24 - inset-x-24 - inset-y-24 - top-24 - right-24 - bottom-24 - left-24 - inset-28 - inset-x-28 - inset-y-28 - top-28 - right-28 - bottom-28 - left-28 - inset-32 - inset-x-32 - inset-y-32 - top-32 - right-32 - bottom-32 - left-32 - inset-36 - inset-x-36 - inset-y-36 - top-36 - right-36 - bottom-36 - left-36 - inset-40 - inset-x-40 - inset-y-40 - top-40 - right-40 - bottom-40 - left-40 - inset-44 - inset-x-44 - inset-y-44 - top-44 - right-44 - bottom-44 - left-44 - inset-48 - inset-x-48 - inset-y-48 - top-48 - right-48 - bottom-48 - left-48 - inset-52 - inset-x-52 - inset-y-52 - top-52 - right-52 - bottom-52 - left-52 - inset-56 - inset-x-56 - inset-y-56 - top-56 - right-56 - bottom-56 - left-56 - inset-60 - inset-x-60 - inset-y-60 - top-60 - right-60 - bottom-60 - left-60 - inset-64 - inset-x-64 - inset-y-64 - top-64 - right-64 - bottom-64 - left-64 - inset-72 - inset-x-72 - inset-y-72 - top-72 - right-72 - bottom-72 - left-72 - inset-80 - inset-x-80 - inset-y-80 - top-80 - right-80 - bottom-80 - left-80 - inset-96 - inset-x-96 - inset-y-96 - top-96 - right-96 - bottom-96 - left-96 - inset-auto - inset-1/2 - inset-1/3 - inset-2/3 - inset-1/4 - inset-2/4 - inset-3/4 - inset-full - inset-x-auto - inset-x-1/2 - inset-x-1/3 - inset-x-2/3 - inset-x-1/4 - inset-x-2/4 - inset-x-3/4 - inset-x-full - inset-y-auto - inset-y-1/2 - inset-y-1/3 - inset-y-2/3 - inset-y-1/4 - inset-y-2/4 - inset-y-3/4 - inset-y-full - top-auto - top-1/2 - top-1/3 - top-2/3 - top-1/4 - top-2/4 - top-3/4 - top-full - right-auto - right-1/2 - right-1/3 - right-2/3 - right-1/4 - right-2/4 - right-3/4 - right-full - bottom-auto - bottom-1/2 - bottom-1/3 - bottom-2/3 - bottom-1/4 - bottom-2/4 - bottom-3/4 - bottom-full - left-auto - left-1/2 - left-1/3 - left-2/3 - left-1/4 - left-2/4 - left-3/4 - left-full ### Object Position 用于控制替换元素的内容在其容器中的定位方式的实用程序 - object-bottom - object-center - object-left - object-left-bottom - object-left-top - object-right - object-right-bottom - object-right-top - object-top ### Overflow 用于控制元素如何处理对于容器来说太大的内容的实用程序 - overflow-auto - overflow-hidden - overflow-clip - overflow-visible - overflow-scroll - overflow-x-auto - overflow-y-auto - overflow-x-hidden - overflow-y-hidden - overflow-x-clip - overflow-y-clip - overflow-x-visible - overflow-y-visible - overflow-x-scroll - overflow-y-scroll ### Visibility 用于控制元素可见性的实用程序 - visible - invisible - collapse ### Z-index 用于控制元素堆叠顺序的实用程序 - z-0 - z-10 - z-20 - z-30 - z-40 - z-50 - z-auto ### Overscroll Behavior 用于控制浏览器到达滚动区域边界时的行为方式的实用程序 - overscroll-auto - overscroll-contain - overscroll-none - overscroll-y-auto - overscroll-y-contain - overscroll-y-none - overscroll-x-auto - overscroll-x-contain - overscroll-x-none ### Position 用于控制元素在 DOM 中的定位方式的实用程序 - static - fixed - absolute - relative - sticky Sizing --- ### Width 用于设置元素宽度的实用程序 - w-0 - w-px - w-0.5 - w-1 - w-1.5 - w-2 - w-2.5 - w-3 - w-3.5 - w-4 - w-5 - w-6 - w-7 - w-8 - w-9 - w-10 - w-11 - w-12 - w-14 - w-16 - w-20 - w-24 - w-28 - w-32 - w-36 - w-40 - w-44 - w-48 - w-52 - w-56 - w-60 - w-64 - w-72 - w-80 - w-96 - w-auto - w-1/2 - w-1/3 - w-2/3 - w-1/4 - w-2/4 - w-3/4 - w-1/5 - w-2/5 - w-3/5 - w-4/5 - w-1/6 - w-2/6 - w-3/6 - w-4/6 - w-5/6 - w-1/12 - w-2/12 - w-3/12 - w-4/12 - w-5/12 - w-6/12 - w-7/12 - w-8/12 - w-9/12 - w-10/12 - w-11/12 - w-full - w-screen - w-min - w-max - w-fit ### Min-Width 用于设置元素的最小宽度的实用程序 - min-w-0 - min-w-full - min-w-min - min-w-max - min-w-fit ### Max-Width 用于设置元素最大宽度的实用程序 - max-w-0 - max-w-none - max-w-xs - max-w-sm - max-w-md - max-w-lg - max-w-xl - max-w-2xl - max-w-3xl - max-w-4xl - max-w-5xl - max-w-6xl - max-w-7xl - max-w-full - max-w-min - max-w-max - max-w-fit - max-w-prose - max-w-screen-sm - max-w-screen-md - max-w-screen-lg - max-w-screen-xl - max-w-screen-2xl ### Height 用于设置元素高度的实用程序 - h-0 - h-px - h-0.5 - h-1 - h-1.5 - h-2 - h-2.5 - h-3 - h-3.5 - h-4 - h-5 - h-6 - h-7 - h-8 - h-9 - h-10 - h-11 - h-12 - h-14 - h-16 - h-20 - h-24 - h-28 - h-32 - h-36 - h-40 - h-44 - h-48 - h-52 - h-56 - h-60 - h-64 - h-72 - h-80 - h-96 - h-auto - h-1/2 - h-1/3 - h-2/3 - h-1/4 - h-2/4 - h-3/4 - h-1/5 - h-2/5 - h-3/5 - h-4/5 - h-1/6 - h-2/6 - h-3/6 - h-4/6 - h-5/6 - h-full - h-screen - h-min - h-max - h-fit ### Min-Height 用于设置元素的最小高度的实用程序 - min-h-0 - min-h-full - min-h-screen - min-h-min - min-h-max - min-h-fit ### Max-Height 用于设置元素最大高度的实用程序 - max-h-0 - max-h-px - max-h-0.5 - max-h-1 - max-h-1.5 - max-h-2 - max-h-2.5 - max-h-3 - max-h-3.5 - max-h-4 - max-h-5 - max-h-6 - max-h-7 - max-h-8 - max-h-9 - max-h-10 - max-h-11 - max-h-12 - max-h-14 - max-h-16 - max-h-20 - max-h-24 - max-h-28 - max-h-32 - max-h-36 - max-h-40 - max-h-44 - max-h-48 - max-h-52 - max-h-56 - max-h-60 - max-h-64 - max-h-72 - max-h-80 - max-h-96 - max-h-full - max-h-screen - max-h-min - max-h-max - max-h-fit Borders --- ### Border Radius 用于控制元素边界半径的实用程序 - rounded-none - rounded-sm - rounded - rounded-md - rounded-lg - rounded-xl - rounded-2xl - rounded-3xl - rounded-full - rounded-t-none - rounded-t-sm - rounded-t - rounded-t-md - rounded-t-lg - rounded-t-xl - rounded-t-2xl - rounded-t-3xl - rounded-t-full - rounded-r-none - rounded-r-sm - rounded-r - rounded-r-md - rounded-r-lg - rounded-r-xl - rounded-r-2xl - rounded-r-3xl - rounded-r-full - rounded-b-none - rounded-b-sm - rounded-b - rounded-b-md - rounded-b-lg - rounded-b-xl - rounded-b-2xl - rounded-b-3xl - rounded-b-full - rounded-l-none - rounded-l-sm - rounded-l - rounded-l-md - rounded-l-lg - rounded-l-xl - rounded-l-2xl - rounded-l-3xl - rounded-l-full - rounded-tl-none - rounded-tl-sm - rounded-tl - rounded-tl-md - rounded-tl-lg - rounded-tl-xl - rounded-tl-2xl - rounded-tl-3xl - rounded-tl-full - rounded-tr-none - rounded-tr-sm - rounded-tr - rounded-tr-md - rounded-tr-lg - rounded-tr-xl - rounded-tr-2xl - rounded-tr-3xl - rounded-tr-full - rounded-br-none - rounded-br-sm - rounded-br - rounded-br-md - rounded-br-lg - rounded-br-xl - rounded-br-2xl - rounded-br-3xl - rounded-br-full - rounded-bl-none - rounded-bl-sm - rounded-bl - rounded-bl-md - rounded-bl-lg - rounded-bl-xl - rounded-bl-2xl - rounded-bl-3xl - rounded-bl-full ### Border Width 用于控制元素边框宽度的实用程序 - border-0 - border-2 - border-4 - border-8 - border - border-x-0 - border-x-2 - border-x-4 - border-x-8 - border-x - border-y-0 - border-y-2 - border-y-4 - border-y-8 - border-y - border-t-0 - border-t-2 - border-t-4 - border-t-8 - border-t - border-r-0 - border-r-2 - border-r-4 - border-r-8 - border-r - border-b-0 - border-b-2 - border-b-4 - border-b-8 - border-b - border-l-0 - border-l-2 - border-l-4 - border-l-8 - border-l ### Border Color 用于控制元素边框颜色的实用程序 - border-inherit - border-current - border-transparent - border-black - border-white - border-slate-50 - border-slate-100 - border-slate-200 - border-slate-300 - border-slate-400 - border-slate-500 - border-slate-600 - border-slate-700 - border-slate-800 - border-slate-900 - border-gray-50 - border-gray-100 - border-gray-200 - border-gray-300 - border-gray-400 - border-gray-500 - border-gray-600 - border-gray-700 - border-gray-800 - border-gray-900 - border-zinc-50 - border-zinc-100 - border-zinc-200 - border-zinc-300 - border-zinc-400 - border-zinc-500 - border-zinc-600 - border-zinc-700 - border-zinc-800 - border-zinc-900 - border-neutral-50 - border-neutral-100 - border-neutral-200 - border-neutral-300 - border-neutral-400 - border-neutral-500 - border-neutral-600 - border-neutral-700 - border-neutral-800 - border-neutral-900 - border-stone-50 - border-stone-100 - border-stone-200 - border-stone-300 - border-stone-400 - border-stone-500 - border-stone-600 - border-stone-700 - border-stone-800 - border-stone-900 - border-red-50 - border-red-100 - border-red-200 - border-red-300 - border-red-400 - border-red-500 - border-red-600 - border-red-700 - border-red-800 - [...](https://tailwindcss.com/docs/border-color) ### Border Style 用于控制元素边框样式的实用程序 - border-solid - border-dashed - border-dotted - border-double - border-hidden - border-none ### Divide Width 用于控制元素之间的边框宽度的实用程序 - divide-x-0 > \* + \* - divide-x-2 > \* + \* - divide-x-4 > \* + \* - divide-x-8 > \* + \* - divide-x > \* + \* - divide-y-0 > \* + \* - divide-y-2 > \* + \* - divide-y-4 > \* + \* - divide-y-8 > \* + \* - divide-y > \* + \* - divide-y-reverse > \* + \* - divide-x-reverse > \* + \* ### Divide Color 用于控制元素之间的边框颜色的实用程序 - divide-inherit > \* + \* - divide-current > \* + \* - divide-transparent > \* + \* - divide-black > \* + \* - divide-white > \* + \* - divide-slate-50 > \* + \* - divide-slate-100 > \* + \* - divide-slate-200 > \* + \* - divide-slate-300 > \* + \* - divide-slate-400 > \* + \* - divide-slate-500 > \* + \* - divide-slate-600 > \* + \* - divide-slate-700 > \* + \* - divide-slate-800 > \* + \* - divide-slate-900 > \* + \* - divide-gray-50 > \* + \* - divide-gray-100 > \* + \* - divide-gray-200 > \* + \* - divide-gray-300 > \* + \* - divide-gray-400 > \* + \* - divide-gray-500 > \* + \* - divide-gray-600 > \* + \* - divide-gray-700 > \* + \* - divide-gray-800 > \* + \* - divide-gray-900 > \* + \* - divide-zinc-50 > \* + \* - divide-zinc-100 > \* + \* - divide-zinc-200 > \* + \* - divide-zinc-300 > \* + \* - divide-zinc-400 > \* + \* - divide-zinc-500 > \* + \* - divide-zinc-600 > \* + \* - divide-zinc-700 > \* + \* - divide-zinc-800 > \* + \* - divide-zinc-900 > \* + \* - [...](https://tailwindcss.com/docs/divide-color) ### Divide Style 用于控制元素之间的边框样式的实用程序 - divide-solid > \* + \* - divide-dashed > \* + \* - divide-dotted > \* + \* - divide-double > \* + \* - divide-none > \* + \* ### Outline Width 用于控制元素轮廓宽度的实用程序 - outline-0 - outline-1 - outline-2 - outline-4 - outline-8 ### Outline Color 用于控制元素轮廓颜色的实用程序 - outline-inherit - outline-current - outline-transparent - outline-black - outline-white - outline-slate-50 - outline-slate-100 - outline-slate-200 - outline-slate-300 - outline-slate-400 - outline-slate-500 - outline-slate-600 - outline-slate-700 - outline-slate-800 - outline-slate-900 - outline-gray-50 - outline-gray-100 - [...](https://tailwindcss.com/docs/outline-color) ### Outline Style 用于控制元素轮廓样式的实用程序 - outline-none - outline - outline-dashed - outline-dotted - outline-double ### Outline Offset 用于控制元素轮廓偏移的实用程序 - outline-offset-0 - outline-offset-1 - outline-offset-2 - outline-offset-4 - outline-offset-8 ### Ring Width 用于创建带有框阴影的轮廓环的实用程序 - ring-0 - ring-1 - ring-2 - ring - ring-4 - ring-8 - ring-inset ### Ring Color 用于设置轮廓环颜色的实用程序 - ring-inherit - ring-current - ring-transparent - ring-black - ring-white - ring-slate-50 - ring-slate-100 - ring-slate-200 - ring-slate-300 - ring-slate-400 - ring-slate-500 - ring-slate-600 - ring-slate-700 - ring-slate-800 - ring-slate-900 - ring-gray-50 - ring-gray-100 - ring-gray-200 - ring-gray-300 - ring-gray-400 - ring-gray-500 - ring-gray-600 - ring-gray-700 - ring-gray-800 - [...](https://tailwindcss.com/docs/ring-color) ### Ring Offset Width 添加轮廓环时模拟偏移的实用程序 - ring-offset-0 - ring-offset-1 - ring-offset-2 - ring-offset-4 - ring-offset-8 ### Ring Offset Color 用于设置轮廓环偏移颜色的实用程序 - ring-offset-inherit - ring-offset-current - ring-offset-transparent - ring-offset-black - ring-offset-white - ring-offset-slate-50 - ring-offset-slate-100 - ring-offset-slate-200 - ring-offset-slate-300 - ring-offset-slate-400 - ring-offset-slate-500 - ring-offset-slate-600 - ring-offset-slate-700 - ring-offset-slate-800 - ring-offset-slate-900 - ring-offset-gray-50 - ring-offset-gray-100 - ring-offset-gray-200 - ring-offset-gray-300 - ring-offset-gray-400 - ring-offset-gray-500 - [...](https://tailwindcss.com/docs/ring-offset-color) Transitions & Animation --- ### Transition Property 用于控制哪些 CSS 属性转换的实用程序 - transition-none - transition-all - transition - transition-colors - transition-opacity - transition-shadow - transition-transform ### Transition Duration 用于控制 CSS 过渡持续时间的实用程序 - duration-75 - duration-100 - duration-150 - duration-200 - duration-300 - duration-500 - duration-700 - duration-1000 ### Transition Timing Function 用于控制 CSS 过渡缓动的实用程序 - ease-linear - ease-in - ease-out - ease-in-out ### Transition Delay 用于控制 CSS 转换延迟的实用程序 - delay-75 - delay-100 - delay-150 - delay-200 - delay-300 - delay-500 - delay-700 - delay-1000 ### Animation 使用 CSS 动画对元素进行动画处理的实用程序 - animate-none - animate-spin - animate-ping - animate-pulse - animate-bounce Tables --- ### Border Collapse - border-collapse - border-separate 用于控制表格边框是折叠还是分开的实用程序 ### Border Spacing 用于控制表格边框间距的实用程序 - border-spacing-0 - border-spacing-x-0 - border-spacing-y-0 - border-spacing-px - border-spacing-x-px - border-spacing-y-px - border-spacing-0.5 - border-spacing-x-0.5 - border-spacing-y-0.5 - border-spacing-1 - border-spacing-x-1 - border-spacing-y-1 - border-spacing-1.5 - border-spacing-x-1.5 - border-spacing-y-1.5 - border-spacing-2 - border-spacing-x-2 - border-spacing-y-2 - border-spacing-2.5 - border-spacing-x-2.5 - border-spacing-y-2.5 - border-spacing-3 - border-spacing-x-3 - border-spacing-y-3 - border-spacing-3.5 - [...](https://tailwindcss.com/docs/border-spacing) ### Table Layout - table-auto - table-fixed 用于控制表布局算法的实用程序 Backgrounds --- ### Background Attachment 用于控制背景图像在滚动时的行为方式的实用程序 - bg-fixed - bg-local - bg-scroll ### Background Color 用于控制元素背景颜色的实用程序 - bg-inherit - bg-current - bg-transparent - bg-black - bg-white - bg-slate-50 - bg-slate-100 - bg-slate-200 - bg-slate-300 - bg-slate-400 - bg-slate-500 - bg-slate-600 - bg-slate-700 - bg-slate-800 - bg-slate-900 - bg-gray-50 - bg-gray-100 - bg-gray-200 - bg-gray-300 - bg-gray-400 - bg-gray-500 - bg-gray-600 - [...](https://tailwindcss.com/docs/background-color) ### Background Clip 用于控制元素背景边界框的实用程序 - bg-clip-border - bg-clip-padding - bg-clip-content - bg-clip-text ### Background Origin 用于控制元素背景相对于边框、填充和内容的定位方式的实用程序 - bg-origin-border - bg-origin-padding - bg-origin-content ### Background Position 用于控制元素背景图像位置的实用程序 - bg-bottom - bg-center - bg-left - bg-left-bottom - bg-left-top - bg-right - bg-right-bottom - bg-right-top - bg-top ### Background Repeat 用于控制元素背景图像重复的实用程序 - bg-repeat - bg-no-repeat - bg-repeat-x - bg-repeat-y - bg-repeat-round - bg-repeat-space ### Background Size 用于控制元素背景图像的背景大小的实用程序 - bg-auto - bg-cover - bg-contain ### Gradient Color Stops 用于控制背景渐变色标的实用程序 - from-inherit - from-current - from-transparent - from-black - from-white - from-slate-50 - from-slate-100 - from-slate-200 - from-slate-300 - from-slate-400 - from-slate-500 - from-slate-600 - from-slate-700 - from-slate-800 - from-slate-900 - from-gray-50 - from-gray-100 - from-gray-200 - [...](https://tailwindcss.com/docs/gradient-color-stops) ### Background Image 用于控制元素背景图像的实用程序 - bg-none - bg-gradient-to-t - bg-gradient-to-tr - bg-gradient-to-r - bg-gradient-to-br - bg-gradient-to-b - bg-gradient-to-bl - bg-gradient-to-l - bg-gradient-to-tl Spacing --- ### Padding 用于控制元素填充的实用程序 - p-0 - px-0 - py-0 - pt-0 - pr-0 - pb-0 - pl-0 - p-px - px-px - py-px - pt-px - pr-px - pb-px - pl-px - p-0.5 - px-0.5 - py-0.5 - pt-0.5 - pr-0.5 - pb-0.5 - pl-0.5 - [...](https://tailwindcss.com/docs/padding) ### Margin 用于控制元素边距的实用程序 - m-0 - mx-0 - my-0 - mt-0 - mr-0 - mb-0 - ml-0 - m-px - mx-px - my-px - mt-px - mr-px - mb-px - ml-px - m-0.5 - mx-0.5 - my-0.5 - mt-0.5 - mr-0.5 - mb-0.5 - ml-0.5 - [...](https://tailwindcss.com/docs/margin) ### Space Between 用于控制子元素之间空间的实用程序 - space-x-0 > \* + \* - space-y-0 > \* + \* - space-x-0.5 > \* + \* - space-y-0.5 > \* + \* - space-x-1 > \* + \* - space-y-1 > \* + \* - space-x-1.5 > \* + \* - space-y-1.5 > \* + \* - space-x-2 > \* + \* - space-y-2 > \* + \* - space-x-2.5 > \* + \* - space-y-2.5 > \* + \* - space-x-3 > \* + \* - space-y-3 > \* + \* - space-x-3.5 > \* + \* - space-y-3.5 > \* + \* - space-x-4 > \* + \* - space-y-4 > \* + \* - space-x-5 > \* + \* - space-y-5 > \* + \* - space-x-6 > \* + \* - space-y-6 > \* + \* - space-x-7 > \* + \* - space-y-7 > \* + \* - [...](https://tailwindcss.com/docs/space) SVG --- ### Fill 用于样式化 SVG 元素填充的实用程序 - fill-none - fill-inherit - fill-current - fill-transparent - fill-black - fill-white - fill-slate-50 - fill-slate-100 - fill-slate-200 - fill-slate-300 - fill-slate-400 - fill-slate-500 - fill-slate-600 - fill-slate-700 - fill-slate-800 - fill-slate-900 - fill-gray-50 - fill-gray-100 - [...](https://tailwindcss.com/docs/fill) ### Stroke 用于设置 SVG 元素笔划样式的实用程序 - stroke-none - stroke-inherit - stroke-current - stroke-transparent - stroke-black - stroke-white - stroke-slate-50 - stroke-slate-100 - stroke-slate-200 - stroke-slate-300 - stroke-slate-400 - stroke-slate-500 - stroke-slate-600 - stroke-slate-700 - stroke-slate-800 - stroke-slate-900 - stroke-gray-50 - stroke-gray-100 - [...](https://tailwindcss.com/docs/fill) ### Stroke Width 用于设置 SVG 元素笔划宽度样式的实用程序 - stroke-0 - stroke-1 - stroke-2 Typography --- ### Font Family 用于控制元素字体系列的实用程序 - font-sans - font-serif - font-mono ### Font Size 用于控制元素字体大小的实用程序 - text-xs - text-sm - text-base - text-lg - text-xl - text-2xl - text-3xl - text-4xl - text-5xl - text-6xl - text-7xl - text-8xl - text-9xl ### Font Smoothing 用于控制元素字体平滑的实用程序 - antialiased - subpixel-antialiased ### Font Style 用于控制文本样式的实用程序 - italic - not-italic ### Font Weight 用于控制元素字体粗细的实用程序 - font-thin - font-extralight - font-light - font-normal - font-medium - font-semibold - font-bold - font-extrabold - font-black ### Font Variant Numeric 用于控制数字变体的实用程序 - normal-nums - ordinal - slashed-zero - lining-nums - oldstyle-nums - proportional-nums - tabular-nums - diagonal-fractions - stacked-fractions ### Letter Spacing 用于控制元素的跟踪(字母间距)的实用程序 - tracking-tighter - tracking-tight - tracking-normal - tracking-wide - tracking-wider - tracking-widest ### Line Height 用于控制元素行距(行高)的实用程序 - leading-3 - leading-4 - leading-5 - leading-6 - leading-7 - leading-8 - leading-9 - leading-10 - leading-none - leading-tight - leading-snug - leading-normal - leading-relaxed - leading-loose ### List Style Type 用于控制列表的项目符号/编号样式的实用程序 - list-none - list-disc - list-decimal ### List Style Position 用于控制列表中项目符号/编号位置的实用程序 - list-inside - list-outside ### Text Align 用于控制文本对齐的实用程序 - text-left - text-center - text-right - text-justify - text-start - text-end ### Text Decoration 用于控制文本装饰的实用程序 - underline - overline - line-through - no-underline ### Text Color 用于控制元素文本颜色的实用程序 - text-inherit - text-current - text-transparent - text-black - text-white - text-slate-50 - text-slate-100 - text-slate-200 - text-slate-300 - text-slate-400 - text-slate-500 - text-slate-600 - text-slate-700 - text-slate-800 - text-slate-900 - text-gray-50 - text-gray-100 - text-gray-200 - text-gray-300 - text-gray-400 - text-gray-500 - [...](https://tailwindcss.com/docs/text-color) ### Text Decoration Color 用于控制文本装饰颜色的实用程序 - decoration-inherit - decoration-current - decoration-transparent - decoration-black - decoration-white - decoration-slate-50 - decoration-slate-100 - decoration-slate-200 - decoration-slate-300 - decoration-slate-400 - decoration-slate-500 - decoration-slate-600 - decoration-slate-700 - decoration-slate-800 - decoration-slate-900 - decoration-gray-50 - decoration-gray-100 - decoration-gray-200 - decoration-gray-300 - decoration-gray-400 - decoration-gray-500 - [...](https://tailwindcss.com/docs/text-decoration-color) ### Text Decoration Style 用于控制文本装饰样式的实用程序 - decoration-solid - decoration-double - decoration-dotted - decoration-dashed - decoration-wavy ### Text Decoration Thickness 用于控制文本装饰厚度的实用程序 - decoration-auto - decoration-from-font - decoration-0 - decoration-1 - decoration-2 - decoration-4 - decoration-8 ### Text Underline Offset 用于控制文本下划线偏移量的实用程序 - underline-offset-auto - underline-offset-0 - underline-offset-1 - underline-offset-2 - underline-offset-4 - underline-offset-8 ### Text Transform 用于控制文本转换的实用程序 - uppercase - lowercase - capitalize - normal-case ### Text Overflow 用于控制元素中文本溢出的实用程序 - truncate - text-ellipsis - text-clip ### Text Indent 用于控制块中文本前显示的空白空间量的实用程序 - indent-0 - indent-px - indent-0.5 - indent-1 - indent-1.5 - indent-2 - indent-2.5 - indent-3 - indent-3.5 - indent-4 - indent-5 - indent-6 - indent-7 - indent-8 - indent-9 - indent-10 - indent-11 - indent-12 - indent-14 - indent-16 - indent-20 - indent-24 - indent-28 - indent-32 - indent-36 - indent-40 - indent-44 - indent-48 - indent-52 - indent-56 - indent-60 - indent-64 - indent-72 - indent-80 - indent-96 ### Vertical Align 用于控制内联或表格单元格框的垂直对齐的实用程序 - align-baseline - align-top - align-middle - align-bottom - align-text-top - align-text-bottom - align-sub - align-super ### Whitespace 用于控制元素的空白属性的实用程序 - whitespace-normal - whitespace-nowrap - whitespace-pre - whitespace-pre-line - whitespace-pre-wrap ### Word Break 用于控制元素中的分词的实用程序 - break-normal - break-words - break-all - break-keep ### Content 用于控制前后伪元素内容的实用程序 - content-none Transforms --- ### Scale 使用变换缩放元素的实用程序 - scale-0 - scale-x-0 - scale-y-0 - scale-50 - scale-x-50 - scale-y-50 - scale-75 - scale-x-75 - scale-y-75 - scale-90 - scale-x-90 - scale-y-90 - scale-95 - scale-x-95 - scale-y-95 - scale-100 - scale-x-100 - scale-y-100 - scale-105 - scale-x-105 - scale-y-105 - scale-110 - scale-x-110 - scale-y-110 - scale-125 - scale-x-125 - scale-y-125 - scale-150 - scale-x-150 - scale-y-150 ### Rotate 使用变换旋转元素的实用程序 - rotate-0 - rotate-1 - rotate-2 - rotate-3 - rotate-6 - rotate-12 - rotate-45 - rotate-90 - rotate-180 ### Translate 使用 transform 翻译元素的实用程序 - translate-x-0 - translate-y-0 - translate-x-px - translate-y-px - translate-x-0.5 - translate-y-0.5 - translate-x-1 - translate-y-1 - translate-x-1.5 - translate-y-1.5 - translate-x-2 - translate-y-2 - translate-x-2.5 - translate-y-2.5 - translate-x-3 - translate-y-3 - translate-x-3.5 - translate-y-3.5 - translate-x-4 - translate-y-4 - translate-x-5 - translate-y-5 - translate-x-6 - translate-y-6 - translate-x-7 - translate-y-7 - translate-x-8 - translate-y-8 - translate-x-9 - translate-y-9 - translate-x-10 - translate-y-10 - translate-x-11 - translate-y-11 - translate-x-12 - translate-y-12 - translate-x-14 - translate-y-14 - translate-x-16 - translate-y-16 - translate-x-20 - translate-y-20 - translate-x-24 - translate-y-24 - translate-x-28 - translate-y-28 - translate-x-32 - translate-y-32 - translate-x-36 - translate-y-36 - translate-x-40 - translate-y-40 - translate-x-44 - translate-y-44 - translate-x-48 - translate-y-48 - translate-x-52 - translate-y-52 - translate-x-56 - translate-y-56 - translate-x-60 - translate-y-60 - translate-x-64 - translate-y-64 - translate-x-72 - translate-y-72 - translate-x-80 - translate-y-80 - translate-x-96 - translate-y-96 - translate-x-1/2 - translate-x-1/3 - translate-x-2/3 - translate-x-1/4 - translate-x-2/4 - translate-x-3/4 - translate-x-full - translate-y-1/2 - translate-y-1/3 - translate-y-2/3 - translate-y-1/4 - translate-y-2/4 - translate-y-3/4 - translate-y-full ### Skew 使用变换倾斜元素的实用程序 - skew-x-0 - skew-y-0 - skew-x-1 - skew-y-1 - skew-x-2 - skew-y-2 - skew-x-3 - skew-y-3 - skew-x-6 - skew-y-6 - skew-x-12 - skew-y-12 ### Transform Origin 用于指定元素转换原点的实用程序 - origin-center - origin-top - origin-top-right - origin-right - origin-bottom-right - origin-bottom - origin-bottom-left - origin-left - origin-top-left Interactivity --- ### Accent Color 用于控制表单控件强调色的实用程序 - accent-inherit - accent-current - accent-transparent - accent-black - accent-white - accent-slate-50 - accent-slate-100 - accent-slate-200 - accent-slate-300 - accent-slate-400 - accent-slate-500 - accent-slate-600 - accent-slate-700 - accent-slate-800 - accent-slate-900 - accent-gray-50 - accent-gray-100 - accent-gray-200 - accent-gray-300 - accent-gray-400 - accent-gray-500 - accent-gray-600 - [...](https://tailwindcss.com/docs/text-decoration-color) ### Appearance 用于抑制本机表单控件样式的实用程序 - appearance-none ### Pointer Events 用于控制元素是否响应指针事件的实用程序 - pointer-events-none - pointer-events-auto ### Cursor 将鼠标悬停在元素上时控制光标样式的实用程序 - cursor-auto - cursor-default - cursor-pointer - cursor-wait - cursor-text - cursor-move - cursor-help - cursor-not-allowed - cursor-none - cursor-context-menu - cursor-progress - cursor-cell - cursor-crosshair - cursor-vertical-text - cursor-alias - cursor-copy - cursor-no-drop - cursor-grab - cursor-grabbing - cursor-all-scroll - cursor-col-resize - cursor-row-resize - cursor-n-resize - cursor-e-resize - cursor-s-resize - cursor-w-resize - cursor-ne-resize - cursor-nw-resize - cursor-se-resize - cursor-sw-resize - cursor-ew-resize - cursor-ns-resize - cursor-nesw-resize - cursor-nwse-resize - cursor-zoom-in - cursor-zoom-out ### Caret Color 用于控制文本输入光标颜色的实用程序 - caret-inherit - caret-current - caret-transparent - caret-black - caret-white - caret-slate-50 - caret-slate-100 - caret-slate-200 - caret-slate-300 - caret-slate-400 - caret-slate-500 - caret-slate-600 - caret-slate-700 - caret-slate-800 - caret-slate-900 - caret-gray-50 - caret-gray-100 - caret-gray-200 - caret-gray-300 - caret-gray-400 - caret-gray-500 - caret-gray-600 - caret-gray-700 - caret-gray-800 - caret-gray-900 - caret-zinc-50 - caret-zinc-100 - caret-zinc-200 - caret-zinc-300 - caret-zinc-400 - caret-zinc-500 - caret-zinc-600 - caret-zinc-700 - caret-zinc-800 - caret-zinc-900 - caret-neutral-50 - caret-neutral-100 - caret-neutral-200 - caret-neutral-300 - caret-neutral-400 - caret-neutral-500 - caret-neutral-600 - caret-neutral-700 - caret-neutral-800 - [...](https://tailwindcss.com/docs/caret-color) ### Resize 用于控制如何调整元素大小的实用程序 - resize-none - resize-y - resize-x - resize ### Scroll Behavior 用于控制元素滚动行为的实用程序 - scroll-auto - scroll-smooth ### Scroll Snap Align 用于控制元素的滚动对齐对齐的实用程序 - snap-start - snap-end - snap-center - snap-align-none ### Scroll Snap Stop 用于控制您是否可以跳过可能的对齐位置的实用程序 - snap-normal - snap-always ### Scroll Snap Type 用于控制在捕捉容器中强制执行捕捉点的严格程度的实用程序 - snap-none - snap-x - snap-y - snap-both - snap-mandatory - snap-proximity ### Scroll Margin 用于控制快照容器中项目周围滚动偏移的实用程序 - scroll-m-0 - scroll-mx-0 - scroll-my-0 - scroll-mt-0 - scroll-mr-0 - scroll-mb-0 - scroll-ml-0 - scroll-m-px - scroll-mx-px - scroll-my-px - scroll-mt-px - scroll-mr-px - scroll-mb-px - scroll-ml-px - scroll-m-0.5 - scroll-mx-0.5 - scroll-my-0.5 - scroll-mt-0.5 - scroll-mr-0.5 - scroll-mb-0.5 - scroll-ml-0.5 - scroll-m-1 - scroll-mx-1 - scroll-my-1 - scroll-mt-1 - scroll-mr-1 - scroll-mb-1 - scroll-ml-1 - [...](https://tailwindcss.com/docs/scroll-margin) ### Scroll Padding 用于控制元素在 snap 容器中的滚动偏移的实用程序 - scroll-p-0 - scroll-px-0 - scroll-py-0 - scroll-pt-0 - scroll-pr-0 - scroll-pb-0 - scroll-pl-0 - scroll-p-px - scroll-px-px - scroll-py-px - scroll-pt-px - scroll-pr-px - scroll-pb-px - scroll-pl-px - scroll-p-0.5 - scroll-px-0.5 - scroll-py-0.5 - scroll-pt-0.5 - scroll-pr-0.5 - scroll-pb-0.5 - scroll-pl-0.5 - scroll-p-1 - scroll-px-1 - scroll-py-1 - scroll-pt-1 - scroll-pr-1 - scroll-pb-1 - scroll-pl-1 - [...](https://tailwindcss.com/docs/scroll-padding) ### Touch Action 用于控制元素如何在触摸屏上滚动和缩放的实用程序 - touch-auto - touch-none - touch-pan-x - touch-pan-left - touch-pan-right - touch-pan-y - touch-pan-up - touch-pan-down - touch-pinch-zoom - touch-manipulation ### User Select 用于控制用户是否可以选择元素中的文本的实用程序 - select-none - select-text - select-all - select-auto ### Will Change 用于优化即将发生变化的元素动画的实用程序 - will-change-auto - will-change-scroll - will-change-contents - will-change-transform Filters --- ### Blur 将模糊滤镜应用于元素的实用程序 - blur-none - blur-sm - blur - blur-md - blur-lg - blur-xl - blur-2xl - blur-3xl ### Brightness 将亮度过滤器应用于元素的实用程序 - brightness-0 - brightness-50 - brightness-75 - brightness-90 - brightness-95 - brightness-100 - brightness-105 - brightness-110 - brightness-125 - brightness-150 - brightness-200 ### Contrast 用于将对比滤镜应用于元素的实用程序 - contrast-0 - contrast-50 - contrast-75 - contrast-100 - contrast-125 - contrast-150 - contrast-200 ### Drop Shadow 用于将阴影滤镜应用于元素的实用程序 - drop-shadow-sm - drop-shadow - drop-shadow-md - drop-shadow-lg - drop-shadow-xl - drop-shadow-2xl - drop-shadow-none ### Grayscale 用于将灰度滤镜应用于元素的实用程序 - grayscale-0 - grayscale ### Hue Rotate 用于将色调旋转滤镜应用于元素的实用程序 - hue-rotate-0 - hue-rotate-15 - hue-rotate-30 - hue-rotate-60 - hue-rotate-90 - hue-rotate-180 ### Invert 用于将反转过滤器应用于元素的实用程序 - invert-0 - invert ### Saturate 用于将饱和过滤器应用于元素的实用程序 - saturate-0 - saturate-50 - saturate-100 - saturate-150 - saturate-200 ### Sepia 将棕褐色滤镜应用于元素的实用程序 - sepia-0 - sepia ### Backdrop Blur 将背景模糊滤镜应用于元素的实用程序 - backdrop-blur-none - backdrop-blur-sm - backdrop-blur - backdrop-blur-md - backdrop-blur-lg - backdrop-blur-xl - backdrop-blur-2xl - backdrop-blur-3xl ### Backdrop Brightness 将背景亮度滤镜应用于元素的实用程序 - backdrop-brightness-0 - backdrop-brightness-50 - backdrop-brightness-75 - backdrop-brightness-90 - backdrop-brightness-95 - backdrop-brightness-100 - backdrop-brightness-105 - backdrop-brightness-110 - backdrop-brightness-125 - backdrop-brightness-150 - backdrop-brightness-200 ### Backdrop Contrast 用于将背景对比度滤镜应用于元素的实用程序 - backdrop-contrast-0 - backdrop-contrast-50 - backdrop-contrast-75 - backdrop-contrast-100 - backdrop-contrast-125 - backdrop-contrast-150 - backdrop-contrast-200 ### Backdrop Grayscale 用于将背景灰度滤镜应用于元素的实用程序 - backdrop-grayscale-0 - backdrop-grayscale ### Backdrop Hue Rotate 将背景色调旋转滤镜应用于元素的实用程序 - backdrop-hue-rotate-0 - backdrop-hue-rotate-15 - backdrop-hue-rotate-30 - backdrop-hue-rotate-60 - backdrop-hue-rotate-90 - backdrop-hue-rotate-180 ### Backdrop Invert 将背景反转滤镜应用于元素的实用程序 - backdrop-invert-0 - backdrop-invert ### Backdrop Opacity 用于将背景不透明度过滤器应用于元素的实用程序 - backdrop-opacity-0 - backdrop-opacity-5 - backdrop-opacity-10 - backdrop-opacity-20 - backdrop-opacity-25 - backdrop-opacity-30 - backdrop-opacity-40 - backdrop-opacity-50 - backdrop-opacity-60 - backdrop-opacity-70 - backdrop-opacity-75 - backdrop-opacity-80 - backdrop-opacity-90 - backdrop-opacity-95 - backdrop-opacity-100 ### Backdrop Saturate 用于将背景饱和度滤镜应用于元素的实用程序 - backdrop-saturate-0 - backdrop-saturate-50 - backdrop-saturate-100 - backdrop-saturate-150 - backdrop-saturate-200 ### Backdrop Sepia 将背景棕褐色过滤器应用于元素的实用程序 - backdrop-sepia-0 - backdrop-sepia Flexbox & Grid --- ### Flex Basis 用于控制弹性项目初始大小的实用程序 - basis-0 - basis-1 - basis-2 - basis-3 - basis-4 - basis-5 - basis-6 - basis-7 - basis-8 - basis-9 - basis-10 - basis-11 - basis-12 - basis-14 - basis-16 - basis-20 - basis-24 - basis-28 - basis-32 - basis-36 - basis-40 - basis-44 - basis-48 - basis-52 - basis-56 - basis-60 - basis-64 - basis-72 - basis-80 - basis-96 - basis-auto - basis-px - basis-0.5 - basis-1.5 - basis-2.5 - basis-3.5 - basis-1/2 - basis-1/3 - basis-2/3 - basis-1/4 - basis-2/4 - basis-3/4 - basis-1/5 - basis-2/5 - basis-3/5 - basis-4/5 - basis-1/6 - basis-2/6 - basis-3/6 - basis-4/6 - basis-5/6 - basis-1/12 - basis-2/12 - basis-3/12 - basis-4/12 - basis-5/12 - basis-6/12 - basis-7/12 - basis-8/12 - basis-9/12 - basis-10/12 - basis-11/12 - basis-full ### Flex Direction 用于控制弹性项目方向的实用程序 - flex-row - flex-row-reverse - flex-col - flex-col-reverse ### Flex Wrap 用于控制弹性项目包装方式的实用程序 - flex-wrap - flex-wrap-reverse - flex-nowrap ### Flex 用于控制弹性项目如何增长和收缩的实用程序 - flex-1 - flex-auto - flex-initial - flex-none ### Flex Grow 用于控制弹性项目增长方式的实用程序 - grow - grow-0 ### Flex Shrink 用于控制弹性项目收缩方式的实用程序 - shrink - shrink-0 ### Order 用于控制弹性和网格项目顺序的实用程序 - order-1 - order-2 - order-3 - order-4 - order-5 - order-6 - order-7 - order-8 - order-9 - order-10 - order-11 - order-12 - order-first - order-last - order-none ### Grid Template Columns 用于指定网格布局中的列的实用程序 - grid-cols-1 - grid-cols-2 - grid-cols-3 - grid-cols-4 - grid-cols-5 - grid-cols-6 - grid-cols-7 - grid-cols-8 - grid-cols-9 - grid-cols-10 - grid-cols-11 - grid-cols-12 - grid-cols-none ### Grid Column Start/End 用于控制元素如何调整大小和跨网格列放置的实用程序 - col-auto - col-span-1 - col-span-2 - col-span-3 - col-span-4 - col-span-5 - col-span-6 - col-span-7 - col-span-8 - col-span-9 - col-span-10 - col-span-11 - col-span-12 - col-span-full - col-start-1 - col-start-2 - col-start-3 - col-start-4 - col-start-5 - col-start-6 - col-start-7 - col-start-8 - col-start-9 - col-start-10 - col-start-11 - col-start-12 - col-start-13 - col-start-auto - col-end-1 - col-end-2 - col-end-3 - col-end-4 - col-end-5 - col-end-6 - col-end-7 - col-end-8 - col-end-9 - col-end-10 - col-end-11 - col-end-12 - col-end-13 - col-end-auto ### Grid Template Rows 用于指定网格布局中的行的实用程序 - grid-rows-1 - grid-rows-2 - grid-rows-3 - grid-rows-4 - grid-rows-5 - grid-rows-6 - grid-rows-none ### Grid Row Start/End 用于控制元素如何调整大小和跨网格行放置的实用程序 - row-auto - row-span-1 - row-span-2 - row-span-3 - row-span-4 - row-span-5 - row-span-6 - row-span-full - row-start-1 - row-start-2 - row-start-3 - row-start-4 - row-start-5 - row-start-6 - row-start-7 - row-start-auto - row-end-1 - row-end-2 - row-end-3 - row-end-4 - row-end-5 - row-end-6 - row-end-7 - row-end-auto ### Grid Auto Flow 用于控制网格中元素如何自动放置的实用程序 - grid-flow-row - grid-flow-col - grid-flow-dense - grid-flow-row-dense - grid-flow-col-dense ### Grid Auto Columns 用于控制隐式创建的网格列大小的实用程序 - auto-cols-auto - auto-cols-min - auto-cols-max - auto-cols-fr ### Grid Auto Rows 用于控制隐式创建的网格行大小的实用程序 - auto-rows-auto - auto-rows-min - auto-rows-max - auto-rows-fr ### Gap 用于控制网格和 flexbox 项目之间的间距的实用程序 - gap-x-0 - gap-y-0 - gap-px - gap-x-px - gap-y-px - gap-0.5 - gap-x-0.5 - gap-y-0.5 - gap-1 - gap-x-1 - gap-y-1 - gap-1.5 - gap-x-1.5 - gap-y-1.5 - gap-2 - gap-x-2 - gap-y-2 - gap-2.5 - gap-x-2.5 - gap-y-2.5 - gap-3 - gap-x-3 - gap-y-3 - gap-3.5 - gap-x-3.5 - gap-y-3.5 - gap-4 - gap-x-4 - gap-y-4 - gap-5 - gap-x-5 - gap-y-5 - gap-6 - gap-x-6 - gap-y-6 - gap-7 - gap-x-7 - gap-y-7 - gap-8 - gap-x-8 - gap-y-8 - gap-9 - gap-x-9 - gap-y-9 - gap-10 - gap-x-10 - gap-y-10 - gap-11 - gap-x-11 - gap-y-11 - gap-12 - gap-x-12 - gap-y-12 - gap-14 - gap-x-14 - gap-y-14 - gap-16 - gap-x-16 - gap-y-16 - gap-20 - gap-x-20 - gap-y-20 - gap-24 - gap-x-24 - gap-y-24 - gap-28 - gap-x-28 - gap-y-28 - gap-32 - gap-x-32 - gap-y-32 - gap-36 - gap-x-36 - gap-y-36 - gap-40 - gap-x-40 - gap-y-40 - gap-44 - gap-x-44 - gap-y-44 - gap-48 - gap-x-48 - gap-y-48 - gap-52 - gap-x-52 - gap-y-52 - gap-56 - gap-x-56 - gap-y-56 - gap-60 - gap-x-60 - gap-y-60 - gap-64 - gap-x-64 - gap-y-64 - gap-72 - gap-x-72 - gap-y-72 - gap-80 - gap-x-80 - gap-y-80 - gap-96 - gap-x-96 - gap-y-96 ### Justify Content 用于控制 flex 和 grid 项目如何沿容器的主轴定位的实用程序 - justify-start - justify-end - justify-center - justify-between - justify-around - justify-evenly ### Justify Items 用于控制网格项目如何沿其内联轴对齐的实用程序 - justify-items-start - justify-items-end - justify-items-center - justify-items-stretch ### Justify Self 用于控制单个网格项目如何沿其内联轴对齐的实用程序 - justify-self-auto - justify-self-start - justify-self-end - justify-self-center - justify-self-stretch ### Align Content 用于控制行在多行 flex 和网格容器中的定位方式的实用程序 - content-center - content-start - content-end - content-between - content-around - content-evenly - content-baseline ### Align Items 用于控制 flex 和 grid 项目如何沿容器的横轴定位的实用程序 - items-start - items-end - items-center - items-baseline - items-stretch ### Align Self 用于控制单个弹性或网格项目如何沿其容器的横轴定位的实用程序 - self-auto - self-start - self-end - self-center - self-stretch - self-baseline ### Place Content 用于控制内容如何同时对齐和对齐的实用程序 - place-content-center - place-content-start - place-content-end - place-content-between - place-content-around - place-content-evenly - place-content-baseline - place-content-stretch ### Place Items 用于控制项目如何同时对齐和对齐的实用程序 - place-items-start - place-items-end - place-items-center - place-items-baseline - place-items-stretch ### Place Self 用于控制单个项目如何同时对齐和对齐的实用程序 - place-self-auto - place-self-start - place-self-end - place-self-center - place-self-stretch Accessibility --- ### Screen Readers 用于提高屏幕阅读器可访问性的实用程序 - sr-only - not-sr-only