用于控制元素縱橫比的實用程序

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

設(shè)置最大寬度以匹配當(dāng)前斷點的最小寬度

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

用于控制列或頁面應(yīng)如何在元素后斷開的實用程序

用于控制列或頁面在元素之前應(yīng)如何中斷的實用程序

用于控制應(yīng)如何跨多行、多列或多頁呈現(xiàn)元素片段的實用程序

用于控制瀏覽器應(yīng)如何計算元素總大小的實用程序

用于控制元素周圍內(nèi)容包裝的實用程序

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

用于控制元素周圍內(nèi)容包裝的實用程序

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

用于控制元素是否應(yīng)顯式創(chuàng)建新的堆疊上下文的實用程序

用于控制如何調(diào)整替換元素內(nèi)容大小的實用程序

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

用于控制替換元素的內(nèi)容在其容器中的定位方式的實用程序

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

用于控制元素如何處理對于容器來說太大的內(nèi)容的實用程序

• 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

用于控制瀏覽器到達(dá)滾動區(qū)域邊界時的行為方式的實用程序

• 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

用于設(shè)置元素的最小寬度的實用程序

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

用于設(shè)置元素的最小高度的實用程序

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

用于控制元素邊框?qū)挾鹊膶嵱贸绦?/p>

• 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

用于控制元素之間的邊框?qū)挾鹊膶嵱贸绦?/p>

• 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

用于創(chuàng)建帶有框陰影的輪廓環(huán)的實用程序

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

用于設(shè)置輪廓環(huán)顏色的實用程序

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

添加輪廓環(huán)時模擬偏移的實用程序

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

用于設(shè)置輪廓環(huán)偏移顏色的實用程序

• 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 屬性轉(zhuǎn)換的實用程序

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

用于控制 CSS 過渡持續(xù)時間的實用程序

• 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 轉(zhuǎn)換延遲的實用程序

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

使用 CSS 動畫對元素進(jìn)行動畫處理的實用程序

• 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

用于控制元素背景相對于邊框、填充和內(nèi)容的定位方式的實用程序

• 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

用于控制元素背景圖像重復(fù)的實用程序

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

用于設(shè)置 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
• ...

用于設(shè)置 SVG 元素筆劃寬度樣式的實用程序

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

用于控制元素字體平滑的實用程序

• antialiased
• subpixel-antialiased

用于控制文本樣式的實用程序

• italic
• not-italic

用于控制元素字體粗細(xì)的實用程序

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

用于控制數(shù)字變體的實用程序

• 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

用于控制文本轉(zhuǎn)換的實用程序

• uppercase
• lowercase
• capitalize
• normal-case

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

• truncate
• text-ellipsis
• text-clip

用于控制內(nèi)聯(lián)或表格單元格框的垂直對齊的實用程序

• 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

用于控制前后偽元素內(nèi)容的實用程序

• 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

使用變換旋轉(zhuǎn)元素的實用程序

• 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

用于指定元素轉(zhuǎn)換原點的實用程序

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

用于抑制本機(jī)表單控件樣式的實用程序

• appearance-none

用于控制元素是否響應(yīng)指針事件的實用程序

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

用于控制如何調(diào)整元素大小的實用程序

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

用于控制元素滾動行為的實用程序

• scroll-auto
• scroll-smooth

用于控制元素的滾動對齊對齊的實用程序

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

用于控制您是否可以跳過可能的對齊位置的實用程序

• snap-normal
• snap-always

用于控制在捕捉容器中強(qiáng)制執(zhí)行捕捉點的嚴(yán)格程度的實用程序

• 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

用于優(yōu)化即將發(fā)生變化的元素動畫的實用程序

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

將模糊濾鏡應(yīng)用于元素的實用程序

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

將亮度過濾器應(yīng)用于元素的實用程序

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

用于將對比濾鏡應(yīng)用于元素的實用程序

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

用于將陰影濾鏡應(yīng)用于元素的實用程序

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

用于將灰度濾鏡應(yīng)用于元素的實用程序

• grayscale-0
• grayscale

用于將色調(diào)旋轉(zhuǎn)濾鏡應(yīng)用于元素的實用程序

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

用于將反轉(zhuǎn)過濾器應(yīng)用于元素的實用程序

• invert-0
• invert

用于將飽和過濾器應(yīng)用于元素的實用程序

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

將棕褐色濾鏡應(yīng)用于元素的實用程序

• sepia-0
• sepia

將背景模糊濾鏡應(yīng)用于元素的實用程序

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

用于將背景對比度濾鏡應(yīng)用于元素的實用程序

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

用于將背景灰度濾鏡應(yīng)用于元素的實用程序

• backdrop-grayscale-0
• backdrop-grayscale

將背景色調(diào)旋轉(zhuǎn)濾鏡應(yīng)用于元素的實用程序

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

將背景反轉(zhuǎn)濾鏡應(yīng)用于元素的實用程序

• backdrop-invert-0
• backdrop-invert

用于將背景飽和度濾鏡應(yīng)用于元素的實用程序

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

將背景棕褐色過濾器應(yīng)用于元素的實用程序

• 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

用于控制彈性和網(wǎng)格項目順序的實用程序

• 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

用于指定網(wǎng)格布局中的列的實用程序

• 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

用于指定網(wǎng)格布局中的行的實用程序

• grid-rows-1
• grid-rows-2
• grid-rows-3
• grid-rows-4
• grid-rows-5
• grid-rows-6
• grid-rows-none

用于控制網(wǎng)格中元素如何自動放置的實用程序

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

用于控制隱式創(chuàng)建的網(wǎng)格列大小的實用程序

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

用于控制隱式創(chuàng)建的網(wǎng)格行大小的實用程序

• 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

用于控制網(wǎng)格項目如何沿其內(nèi)聯(lián)軸對齊的實用程序

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

用于控制單個網(wǎng)格項目如何沿其內(nèi)聯(lián)軸對齊的實用程序

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

用于控制行在多行 flex 和網(wǎng)格容器中的定位方式的實用程序

• 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

用于控制單個彈性或網(wǎng)格項目如何沿其容器的橫軸定位的實用程序

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

用于控制內(nèi)容如何同時對齊和對齊的實用程序

• 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