Tailwind CSS 备忘清单

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

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

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

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

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

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

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

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

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

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

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

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

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

用于控制如何调整替换元素内容大小的实用程序

• object-contain
• object-cover
• object-fill
• object-none
• object-scale-down

用于控制替换元素的内容在其容器中的定位方式的实用程序

• object-bottom
• object-center
• object-left
• object-left-bottom
• object-left-top
• object-right
• object-right-bottom
• object-right-top
• object-top

用于控制元素如何处理对于容器来说太大的内容的实用程序

• 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

用于控制元素可见性的实用程序

• visible
• invisible
• collapse

用于控制元素堆叠顺序的实用程序

• z-0
• z-10
• z-20
• z-30
• z-40
• z-50
• z-auto

用于控制浏览器到达滚动区域边界时的行为方式的实用程序

• overscroll-auto
• overscroll-contain
• overscroll-none
• overscroll-y-auto
• overscroll-y-contain
• overscroll-y-none
• overscroll-x-auto
• overscroll-x-contain
• overscroll-x-none

用于控制元素在 DOM 中的定位方式的实用程序

• static
• fixed
• absolute
• relative
• sticky

用于设置元素的最小宽度的实用程序

• min-w-0
• min-w-full
• min-w-min
• min-w-max
• min-w-fit

用于设置元素的最小高度的实用程序

• min-h-0
• min-h-full
• min-h-screen
• min-h-min
• min-h-max
• min-h-fit

用于控制元素边框宽度的实用程序

• 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-solid
• border-dashed
• border-dotted
• border-double
• border-hidden
• border-none

用于控制元素之间的边框宽度的实用程序

• 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-solid > * + *
• divide-dashed > * + *
• divide-dotted > * + *
• divide-double > * + *
• divide-none > * + *

用于控制元素轮廓宽度的实用程序

• outline-0
• outline-1
• outline-2
• outline-4
• outline-8

用于控制元素轮廓样式的实用程序

• outline-none
• outline
• outline-dashed
• outline-dotted
• outline-double

用于控制元素轮廓偏移的实用程序

• outline-offset-0
• outline-offset-1
• outline-offset-2
• outline-offset-4
• outline-offset-8

用于创建带有框阴影的轮廓环的实用程序

• ring-0
• ring-1
• ring-2
• ring
• ring-4
• ring-8
• ring-inset

用于设置轮廓环颜色的实用程序

• 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-0
• ring-offset-1
• ring-offset-2
• ring-offset-4
• ring-offset-8

用于设置轮廓环偏移颜色的实用程序

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

用于控制哪些 CSS 属性转换的实用程序

• transition-none
• transition-all
• transition
• transition-colors
• transition-opacity
• transition-shadow
• transition-transform

用于控制 CSS 过渡持续时间的实用程序

• duration-75
• duration-100
• duration-150
• duration-200
• duration-300
• duration-500
• duration-700
• duration-1000

用于控制 CSS 过渡缓动的实用程序

• ease-linear
• ease-in
• ease-out
• ease-in-out

用于控制 CSS 转换延迟的实用程序

• delay-75
• delay-100
• delay-150
• delay-200
• delay-300
• delay-500
• delay-700
• delay-1000

使用 CSS 动画对元素进行动画处理的实用程序

• animate-none
• animate-spin
• animate-ping
• animate-pulse
• animate-bounce

• border-collapse
• border-separate

用于控制表格边框是折叠还是分开的实用程序

• table-auto
• table-fixed

用于控制表布局算法的实用程序

用于控制背景图像在滚动时的行为方式的实用程序

• bg-fixed
• bg-local
• bg-scroll

用于控制元素背景边界框的实用程序

• bg-clip-border
• bg-clip-padding
• bg-clip-content
• bg-clip-text

用于控制元素背景相对于边框、填充和内容的定位方式的实用程序

• bg-origin-border
• bg-origin-padding
• bg-origin-content

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

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

用于控制元素背景图像重复的实用程序

• bg-repeat
• bg-no-repeat
• bg-repeat-x
• bg-repeat-y
• bg-repeat-round
• bg-repeat-space

用于控制元素背景图像的背景大小的实用程序

• bg-auto
• bg-cover
• bg-contain

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

• 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

用于控制元素填充的实用程序

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

用于控制元素边距的实用程序

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

用于设置 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
• ...

用于设置 SVG 元素笔划宽度样式的实用程序

• stroke-0
• stroke-1
• stroke-2

用于控制元素字体平滑的实用程序

• antialiased
• subpixel-antialiased

用于控制文本样式的实用程序

• italic
• not-italic

用于控制元素字体粗细的实用程序

• font-thin
• font-extralight
• font-light
• font-normal
• font-medium
• font-semibold
• font-bold
• font-extrabold
• font-black

用于控制数字变体的实用程序

• normal-nums
• ordinal
• slashed-zero
• lining-nums
• oldstyle-nums
• proportional-nums
• tabular-nums
• diagonal-fractions
• stacked-fractions

用于控制元素的跟踪（字母间距）的实用程序

• tracking-tighter
• tracking-tight
• tracking-normal
• tracking-wide
• tracking-wider
• tracking-widest

用于控制列表的项目符号/编号样式的实用程序

• list-none
• list-disc
• list-decimal

用于控制列表中项目符号/编号位置的实用程序

• list-inside
• list-outside

用于控制文本对齐的实用程序

• text-left
• text-center
• text-right
• text-justify
• text-start
• text-end

用于控制文本装饰的实用程序

• underline
• overline
• line-through
• no-underline

用于控制文本装饰样式的实用程序

• decoration-solid
• decoration-double
• decoration-dotted
• decoration-dashed
• decoration-wavy

用于控制文本装饰厚度的实用程序

• decoration-auto
• decoration-from-font
• decoration-0
• decoration-1
• decoration-2
• decoration-4
• decoration-8

用于控制文本下划线偏移量的实用程序

• underline-offset-auto
• underline-offset-0
• underline-offset-1
• underline-offset-2
• underline-offset-4
• underline-offset-8

用于控制文本转换的实用程序

• uppercase
• lowercase
• capitalize
• normal-case

用于控制元素中文本溢出的实用程序

• truncate
• text-ellipsis
• text-clip

用于控制内联或表格单元格框的垂直对齐的实用程序

• align-baseline
• align-top
• align-middle
• align-bottom
• align-text-top
• align-text-bottom
• align-sub
• align-super

用于控制元素的空白属性的实用程序

• whitespace-normal
• whitespace-nowrap
• whitespace-pre
• whitespace-pre-line
• whitespace-pre-wrap

用于控制元素中的分词的实用程序

• break-normal
• break-words
• break-all
• break-keep

用于控制前后伪元素内容的实用程序

• content-none

使用变换缩放元素的实用程序

• 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-0
• rotate-1
• rotate-2
• rotate-3
• rotate-6
• rotate-12
• rotate-45
• rotate-90
• rotate-180

使用变换倾斜元素的实用程序

• 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

用于指定元素转换原点的实用程序

• origin-center
• origin-top
• origin-top-right
• origin-right
• origin-bottom-right
• origin-bottom
• origin-bottom-left
• origin-left
• origin-top-left

用于抑制本机表单控件样式的实用程序

• appearance-none

用于控制元素是否响应指针事件的实用程序

• pointer-events-none
• pointer-events-auto

用于控制如何调整元素大小的实用程序

• resize-none
• resize-y
• resize-x
• resize

用于控制元素滚动行为的实用程序

• scroll-auto
• scroll-smooth

用于控制元素的滚动对齐对齐的实用程序

• snap-start
• snap-end
• snap-center
• snap-align-none

用于控制您是否可以跳过可能的对齐位置的实用程序

• snap-normal
• snap-always

用于控制在捕捉容器中强制执行捕捉点的严格程度的实用程序

• snap-none
• snap-x
• snap-y
• snap-both
• snap-mandatory
• snap-proximity

用于控制元素如何在触摸屏上滚动和缩放的实用程序

• 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

用于控制用户是否可以选择元素中的文本的实用程序

• select-none
• select-text
• select-all
• select-auto

用于优化即将发生变化的元素动画的实用程序

• will-change-auto
• will-change-scroll
• will-change-contents
• will-change-transform

将模糊滤镜应用于元素的实用程序

• blur-none
• blur-sm
• blur
• blur-md
• blur-lg
• blur-xl
• blur-2xl
• blur-3xl

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

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

用于将对比滤镜应用于元素的实用程序

• contrast-0
• contrast-50
• contrast-75
• contrast-100
• contrast-125
• contrast-150
• contrast-200

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

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

用于将灰度滤镜应用于元素的实用程序

• grayscale-0
• grayscale

用于将色调旋转滤镜应用于元素的实用程序

• hue-rotate-0
• hue-rotate-15
• hue-rotate-30
• hue-rotate-60
• hue-rotate-90
• hue-rotate-180

用于将反转过滤器应用于元素的实用程序

• invert-0
• invert

用于将饱和过滤器应用于元素的实用程序

• saturate-0
• saturate-50
• saturate-100
• saturate-150
• saturate-200

将棕褐色滤镜应用于元素的实用程序

• sepia-0
• sepia

将背景模糊滤镜应用于元素的实用程序

• backdrop-blur-none
• backdrop-blur-sm
• backdrop-blur
• backdrop-blur-md
• backdrop-blur-lg
• backdrop-blur-xl
• backdrop-blur-2xl
• backdrop-blur-3xl

用于将背景对比度滤镜应用于元素的实用程序

• backdrop-contrast-0
• backdrop-contrast-50
• backdrop-contrast-75
• backdrop-contrast-100
• backdrop-contrast-125
• backdrop-contrast-150
• backdrop-contrast-200

用于将背景灰度滤镜应用于元素的实用程序

• backdrop-grayscale-0
• backdrop-grayscale

将背景色调旋转滤镜应用于元素的实用程序

• 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-0
• backdrop-invert

用于将背景饱和度滤镜应用于元素的实用程序

• backdrop-saturate-0
• backdrop-saturate-50
• backdrop-saturate-100
• backdrop-saturate-150
• backdrop-saturate-200

将背景棕褐色过滤器应用于元素的实用程序

• backdrop-sepia-0
• backdrop-sepia

用于控制弹性项目方向的实用程序

• flex-row
• flex-row-reverse
• flex-col
• flex-col-reverse

用于控制弹性项目包装方式的实用程序

• flex-wrap
• flex-wrap-reverse
• flex-nowrap

用于控制弹性项目如何增长和收缩的实用程序

• flex-1
• flex-auto
• flex-initial
• flex-none

用于控制弹性项目增长方式的实用程序

• grow
• grow-0

用于控制弹性项目收缩方式的实用程序

• shrink
• shrink-0

用于控制弹性和网格项目顺序的实用程序

• 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-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-rows-1
• grid-rows-2
• grid-rows-3
• grid-rows-4
• grid-rows-5
• grid-rows-6
• grid-rows-none

用于控制网格中元素如何自动放置的实用程序

• grid-flow-row
• grid-flow-col
• grid-flow-dense
• grid-flow-row-dense
• grid-flow-col-dense

用于控制隐式创建的网格列大小的实用程序

• auto-cols-auto
• auto-cols-min
• auto-cols-max
• auto-cols-fr

用于控制隐式创建的网格行大小的实用程序

• auto-rows-auto
• auto-rows-min
• auto-rows-max
• auto-rows-fr

用于控制 flex 和 grid 项目如何沿容器的主轴定位的实用程序

• justify-start
• justify-end
• justify-center
• justify-between
• justify-around
• justify-evenly

用于控制网格项目如何沿其内联轴对齐的实用程序

• justify-items-start
• justify-items-end
• justify-items-center
• justify-items-stretch

用于控制单个网格项目如何沿其内联轴对齐的实用程序

• justify-self-auto
• justify-self-start
• justify-self-end
• justify-self-center
• justify-self-stretch

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

• content-center
• content-start
• content-end
• content-between
• content-around
• content-evenly
• content-baseline

用于控制 flex 和 grid 项目如何沿容器的横轴定位的实用程序

• items-start
• items-end
• items-center
• items-baseline
• items-stretch

用于控制单个弹性或网格项目如何沿其容器的横轴定位的实用程序

• self-auto
• self-start
• self-end
• self-center
• self-stretch
• self-baseline

用于控制内容如何同时对齐和对齐的实用程序

• 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-start
• place-items-end
• place-items-center
• place-items-baseline
• place-items-stretch

用于控制单个项目如何同时对齐和对齐的实用程序

• place-self-auto
• place-self-start
• place-self-end
• place-self-center
• place-self-stretch

用于提高屏幕阅读器可访问性的实用程序

• sr-only
• not-sr-only