Tailwind CSS 备忘清单 & tailwindcss cheatsheet & LeoStar

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;

Isolation

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

:--	--
isolate	isolation: isolate;
isolation-auto	isolation: auto;

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

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

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

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

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

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

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

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

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

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

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

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 Position

用于控制元素背景图像位置的实用程序

bg-bottom
bg-center
bg-left
bg-left-bottom
bg-left-top
bg-right
bg-right-bottom
bg-right-top
bg-top

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

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

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

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

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

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

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

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

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

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

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

Brightness

将亮度过滤器应用于元素的实用程序

brightness-0
brightness-50
brightness-75
brightness-90
brightness-95
brightness-100
brightness-105
brightness-110
brightness-125
brightness-150
brightness-200

Drop Shadow

用于将阴影滤镜应用于元素的实用程序

drop-shadow-sm
drop-shadow
drop-shadow-md
drop-shadow-lg
drop-shadow-xl
drop-shadow-2xl
drop-shadow-none

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

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

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

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

Align Content

用于控制行在多行 flex 和网格容器中的定位方式的实用程序

content-center
content-start
content-end
content-between
content-around
content-evenly
content-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

Layout

Aspect Ratio

Container

Columns

Break After

Break Before

Break Inside

Box Decoration Break

Box Sizing

Display

Float

Clear

Isolation

Object Fit

Top/Right/Bottom/Left

Object Position

Overflow

Visibility

Z-index

Overscroll Behavior

Position

Sizing

Width

Min-Width

Max-Width

Height

Min-Height

Max-Height

Borders

Border Radius

Border Width

Border Color

Border Style

Divide Width

Divide Color

Divide Style

Outline Width

Outline Color

Outline Style

Outline Offset

Ring Width

Ring Color

Ring Offset Width

Ring Offset Color

Transitions & Animation

Transition Property

Transition Duration

Transition Timing Function

Transition Delay

Animation

Tables

Border Collapse

Border Spacing

Table Layout

Backgrounds

Background Attachment

Background Color

Background Clip

Background Origin

Background Position

Background Repeat

Background Size

Gradient Color Stops

Background Image

Spacing

Padding

Margin

Space Between

SVG

Fill

Stroke

Stroke Width

Typography

Font Family

Font Size

Font Smoothing

Font Style

Font Weight

Font Variant Numeric

Letter Spacing