diff --git a/README.md b/README.md index f83028d..8a5627c 100644 --- a/README.md +++ b/README.md @@ -87,6 +87,7 @@ Quick Reference [React Native](./docs/react-native.md) [RegEx 正则表达式](./docs/regex.md) [TypeScript](./docs/typescript.md) +[Tailwind CSS](./docs/tailwindcss.md) [Vue 2](./docs/vue2.md) [Vue 3](./docs/vue.md) [ htmx](./docs/htmx.md) diff --git a/assets/tailwindcss.svg b/assets/tailwindcss.svg new file mode 100644 index 0000000..28abcf1 --- /dev/null +++ b/assets/tailwindcss.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/systemd.md b/docs/systemd.md index 000c51a..3c8aebf 100644 --- a/docs/systemd.md +++ b/docs/systemd.md @@ -1,4 +1,4 @@ -Systemd +Systemd 备忘清单 === 最常用的 [Systemd](https://systemd.io/) 命令备忘单快速参考 diff --git a/docs/tailwindcss.md b/docs/tailwindcss.md new file mode 100644 index 0000000..649f499 --- /dev/null +++ b/docs/tailwindcss.md @@ -0,0 +1,3238 @@ +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 +