Tailwind CSS 提供了大量的實用程序類，這些類名都是使用縮寫的方式，以更簡潔地表述其含義。以下是一些常用的 Tailwind CSS 縮寫及其對應的意義：
- 佈局
-
w: width
-
max-w: max-width
-
h: height
-
max-h: max-height
-
m: margin
-
mt: margin-top
-
mb: margin-bottom
-
ml: margin-left
-
mr: margin-right
-
p: padding
-
pt: padding-top
-
pb: padding-bottom
-
pl: padding-left
-
pr: padding-right
- 文本樣式
-
font: font-family
-
text: text-color, text-alignment, text-transform, font-size
-
leading：line-height
-
tracking: letter-spacing
-
uppercase: text-transform: uppercase
-
lowercase: text-transform: lowercase
- 背景和邊框
-
bg: background-color
-
border: border-style, border-width, border-color
-
rounded: border-radius
-
shadow: box-shadow
- 彈性盒子佈局
-
flex: display: flex
-
justify: justify-content
-
items: align-items
-
self: align-self
-
order: order
-
flex-grow: flex-grow
-
flex-shrink: flex-shrink
- 網格佈局
-
grid-cols: grid-template-columns
-
grid-rows: grid-template-rows
-
gap: grid-gap
- 響應式設計
-
sm, md, lg, xl: 分別對應移動設備、平板、桌面、大屏幕
-
hover: 鼠標懸停時的樣式
-
focus: 元素獲取焦點時的樣式
除了上面列舉的 Tailwind CSS 縮寫和對應含義之外，Tailwind CSS 還提供了很多其他的實用程序類，以下是一些常用的 Tailwind CSS 縮寫和對應含義：
- 邊框和分隔符
-
divide: 分隔符 (border-color, border-style, border-width)
-
divide-x: 水平分隔符 (border-color, border-style, border-width)
-
divide-y: 垂直分隔符 (border-color, border-style, border-width)
-
border-collapse: 設置邊框是否合併
- Flexbox 尺寸和排列
-
flex-wrap: 等同於 flex-flow 中的 wrap
-
flex-row, flex-row-reverse, flex-col, flex-col-reverse: flex-direction 的簡寫
-
flex-1...flex-12: 設置 flex-grow、flex-shrink 和 flex-basis 屬性
-
gap-x: 水平包裹在對象（如 flex 子元素）之間的間距。
-
gap-y: 垂直包裹在對象（如 flex 子元素）之間的間距。
-
space-x: 水平排列中對象（如 flex 子元素）之間的空間
-
space-y: 垂直排列中對象（如 flex 子元素）之間的空間
- Z-index
- z-{n}: 設置 z-index 的值，其中 n 爲正整數
- 動畫
- animate-{name}: 向元素添加動畫（使用 @keyframes 中定義的動畫名稱）
- 列表樣式
- list-style-{type}: 設置列表項的類型 (disc, decimal, decimal-leading-zero)
- 轉換和過渡
-
transform: 讓元素旋轉、縮放、傾斜、平移等
-
transition-{property}: 用於添加一個過度效果 {property} 的值是必需的。
- 顏色
-
text-{color}: 設置文本顏色
-
bg-{color}: 設置背景顏色
-
border-{color}: 設置邊框顏色
- 字體權重
-
font-thin: 字體細
-
font-light: 字體輕
-
font-normal: 字體正常
-
font-medium: 字體中等
-
font-semibold: 字體半粗
-
font-bold: 字體粗
-
font-extrabold: 字體特粗
-
font-black: 字體黑
- SVG
-
fill-{color}: 設置 SVG 填充顏色
-
stroke-{color}: 設置 SVG 描邊顏色
- 顯示和隱藏
-
hidden: 隱藏元素（display: none）
-
invisible: 隱藏元素，但仍保留該元素的佈局和尺寸
-
visible: 顯示元素
- 清除浮動
- clear-{direction}: 清除某個方向的浮動效果
- 容器
-
container: 將內容限制在最大寬度的容器內部
-
mx-auto: 實現水平居中（margin-left 和 margin-right 設置爲 auto）
以上是一些常用的 Tailwind CSS 縮寫及其對應的意義，覆蓋了基礎的佈局、文本、背景、邊框、彈性盒子佈局、網格佈局和響應式設計，有助於更快速地開發出具有良好用戶體驗的 Web 應用程序。