Tailwind CSS 备忘清单 & tailwindcss cheatsheet & Quick Reference

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

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

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

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

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

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

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

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

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

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

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

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