Tailwindcss 手册

官网文档

https://tailwindcss.com/docs/aspect-ratio

Layout

Aspect Ratio

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

:--	--
`aspect-auto`	aspect-ratio: auto;
`aspect-square`	aspect-ratio: 1 / 1;
`aspect-video`	aspect-ratio: 16 / 9;

<iframe
  class="w-full aspect-video ..."
  src="https://www.youtube.com/...">
</iframe>

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;

<div class="md:container md:mx-auto">
  <!-- ... -->
</div>

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

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