Tailwind CSS 备忘清单

使用此交互式备忘单快速查找所有类名和 CSS 属性

Layout

Aspect Ratio

用于控制元素纵横比的实用程序

:----
aspect-autoaspect-ratio: auto;
aspect-squareaspect-ratio: 1 / 1;
aspect-videoaspect-ratio: 16 / 9;
<iframe
  class="w-full aspect-video ..."
  src="https://www.youtube.com/...">
</iframe>

Container

设置最大宽度以匹配当前断点的最小宽度

:------
containernonewidth: 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;
<div class="md:container md:mx-auto">
  <!-- ... -->
</div>

Columns

用于控制元素中列数的实用程序

:----
columns-1columns: 1;
columns-2columns: 2;
columns-3columns: 3;
columns-4columns: 4;
columns-5columns: 5;
columns-6columns: 6;
columns-7columns: 7;
columns-8columns: 8;
columns-9columns: 9;
columns-10columns: 10;
columns-11columns: 11;
columns-12columns: 12;
columns-autocolumns: auto;
columns-3xscolumns: 16rem; /256px/
columns-2xscolumns: 18rem; /288px/
columns-xscolumns: 20rem; /320px/
columns-smcolumns: 24rem; /384px/
columns-mdcolumns: 28rem; /448px/
columns-lgcolumns: 32rem; /512px/
columns-xlcolumns: 36rem; /576px/
columns-2xlcolumns: 42rem; /672px/
columns-3xlcolumns: 48rem; /768px/
columns-4xlcolumns: 56rem; /896px/
columns-5xlcolumns: 64rem; /1024px/
columns-6xlcolumns: 72rem; /1152px/
columns-7xlcolumns: 80rem; /1280px/

Break After

用于控制列或页面应如何在元素后断开的实用程序

:----
break-after-autobreak-after: auto;
break-after-avoidbreak-after: avoid;
break-after-allbreak-after: all;
break-after-avoid-pagebreak-after: avoid-page;
break-after-pagebreak-after: page;
break-after-leftbreak-after: left;
break-after-rightbreak-after: right;
break-after-columnbreak-after: column;

Break Before

用于控制列或页面在元素之前应如何中断的实用程序

:----
break-before-autobreak-before: auto;
break-before-avoidbreak-before: avoid;
break-before-allbreak-before: all;
break-before-avoid-page break-before: avoid-page;
break-before-pagebreak-before: page;
break-before-leftbreak-before: left;
break-before-rightbreak-before: right;
break-before-columnbreak-before: column;

Break Inside

用于控制列或页面在元素内的拆分方式的实用程序

:----
break-inside-autobreak-inside: auto;
break-inside-avoidbreak-inside: avoid;
break-inside-avoid-pagebreak-inside: avoid-page;
break-inside-avoid-columnbreak-inside: avoid-column;

Box Decoration Break

用于控制应如何跨多行、多列或多页呈现元素片段的实用程序

:----
box-decoration-clonebox-decoration-break: clone;
box-decoration-slicebox-decoration-break: slice;

Box Sizing

用于控制浏览器应如何计算元素总大小的实用程序

:----
box-borderbox-sizing: border-box;
box-contentbox-sizing: content-box;

Display

用于控制元素显示框类型的实用程序

:----
blockdisplay: block;
inline-blockdisplay: inline-block;
inlinedisplay: inline;
flexdisplay: flex;
inline-flexdisplay: inline-flex;
tabledisplay: table;
inline-tabledisplay: inline-table;
table-captiondisplay: table-caption;
table-celldisplay: table-cell;
table-columndisplay: table-column;
table-column-groupdisplay: table-column-group;
table-footer-groupdisplay: table-footer-group;
table-header-groupdisplay: table-header-group;
table-row-groupdisplay: table-row-group;
table-rowdisplay: table-row;
flow-rootdisplay: flow-root;
griddisplay: grid;
inline-griddisplay: inline-grid;
contentsdisplay: contents;
list-itemdisplay: list-item;
hiddendisplay: none;

Float

用于控制元素周围内容包装的实用程序

  • float-right
  • float-left
  • float-none

Clear

用于控制元素周围内容包装的实用程序

  • clear-left
  • clear-right
  • clear-both
  • clear-none

Isolation

用于控制元素是否应显式创建新的堆叠上下文的实用程序

:----
isolateisolation: isolate;
isolation-autoisolation: 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
  • ...

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 > * + *
  • ...

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
  • ...

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
  • ...

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
  • ...

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
  • ...

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
  • ...

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
  • ...

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
  • ...

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
  • ...

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 > * + *
  • ...

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
  • ...

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
  • ...

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
  • ...

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
  • ...

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
  • ...

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
  • ...

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
  • ...

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
  • ...

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