記錄了在Tailwind中常用的CSS屬性及其對應的class，希望能夠幫助大家快速查找和使用。

我寫這份速查表是因為我經常需要參考Tailwind文檔來記住特定的class（我剛開始使用，還沒有肌肉記憶）。

以下是我最常使用的一些內容：

Margin and Padding（外邊距和內邊距）

以下是相關的表格，輸入數值前加上中線（例如：pt-2，m-auto）：

符號 描述
p 內邊距（Padding）
m 外邊距（Margin）
-m 負外邊距（Negative Margin）
符號 描述
t 上邊距（Top）
r 右邊距（Right）
b 下邊距（Bottom）
l 左邊距（Left）
x 水平方向（Horizontal）
y 垂直方向（Vertical）
值 描述
0 0
1 0.25rem
2 0.5rem
3 0.75rem
4 1rem
5 1.25rem
6 1.5rem
8 2rem
10 2.5rem
12 3rem
16 4rem
20 5rem
24 6rem
32 8rem
px 1px
auto auto

margin: 0 auto（水平居中）

我有時會使用margin: 0 auto將元素水平居中。在Tailwind中，使用mx-auto可以實現這個效果。

Width（寬度）

Class CSS
w-1 width: 0.25rem
w-2 width: 0.5rem
w-3 width: 0.75rem
w-4 width: 1rem
w-6 width: 1.5rem
w-8 width: 2rem
w-10 width: 2.5rem
w-12 width: 3rem
w-16 width: 4rem
w-24 width: 6rem
w-32 width: 8rem
w-48 width: 12rem
w-64 width: 16rem
w-auto width: auto
w-px width: 1px
w-1/2 width: 50%
w-1/3 width: 33.33333%
w-2/3 width: 66.66667%
w-1/4 width: 25%
w-3/4 width: 75%
w-1/5 width: 20%
w-2/5 width: 40%
w-3/5 width: 60%
w-4/5 width: 80%
w-1/6 width: 16.66667%
w-5/6 width: 83.33333%
w-full width: 100%
w-screen width: 100vw

Max Width（最大寬度）

Class CSS
max-w-xs max-width: 20rem
max-w-sm max-width: 30rem
max-w-md max-width: 40rem
max-w-lg max-width: 50rem
max-w-xl max-width: 60rem
max-w-2xl max-width: 70rem
max-w-3xl max-width: 80rem
max-w-4xl max-width: 90rem
max-w-5xl max-width: 100rem
max-w-full max-width: 100%

Min width（最小寬度）

Class CSS
min-w-0 min-width: 0
min-w-full min-width: 100%

Font Family（字體系列）

Class CSS
font-sans font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-serif font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
font-mono font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;

Font Size（字體大小）

Class CSS
text-xs font-size: .75rem
text-sm font-size: .875rem
text-base font-size: 1rem
text-lg font-size: 1.125rem
text-xl font-size: 1.25rem
text-2xl font-size: 1.5rem
text-3xl font-size: 1.875rem
text-4xl font-size: 2.25rem
text-5xl font-size: 3rem

Font weight（字體粗細）

Class CSS
font-hairline font-weight: 100
font-thin font-weight: 200
font-light font-weight: 300
font-normal font-weight: 400
font-medium font-weight: 500
font-semibold font-weight: 600
font-bold font-weight: 700
font-extrabold font-weight: 800
font-black font-weight: 900

Colors（顏色）

Tailwind為我們提供了一系列可以用來匹配相應顏色的class：

  • transparent（透明）
  • black（黑色）
  • gray（灰色）
  • white（白色）
  • red（紅色）
  • orange（橙色）
  • yellow（黃色）
  • green（綠色）
  • teal（青色）
  • blue（藍色）
  • indigo（靛藍色）
  • purple（紫色）
  • pink（粉紅色）

注意：在Tailwind 1.0之前，gray的拼寫是grey。如果你有一個舊項目，請記住這一點。

每個顏色還可以進一步細分，可以使用-100到-900來使顏色從低強度到高強度：

  • orange-100
  • orange-200
  • orange-300
  • orange-400
  • orange-500
  • orange-600
  • orange-700
  • orange-800
  • orange-900

Text color（文字顏色）

在顏色前添加text-。

Background color（背景顏色）

在顏色前添加bg-。

Center text（文字居中）

使用text-center。

Line Height（行高）

Class CSS
.leading-none line-height: 1
.leading-tight line-height: 1.25
.leading-normal line-height: 1.5
.leading-loose line-height: 2

Flexbox（彈性盒模型）

Container（容器）

Class CSS
flex display: flex
inline-flex display: inline-flex

Items（子項）

Direction（方向）

Class CSS
flex-row flex-direction: row
flex-row-reverse flex-direction: row-reverse
flex-col flex-direction: column
flex-col-reverse flex-direction: column-reverse

Wrapping（換行）

Class CSS
flex-no-wrap flex-wrap: nowrap
flex-wrap flex-wrap: wrap
flex-wrap-reverse flex-wrap: wrap-reverse

Align items（對齊項）

Class CSS
items-stretch align-items: stretch
items-start align-items: flex-start
items-center align-items: center
items-end align-items: flex-end
items-baseline align-items: baseline

Align content（對齊內容）

Class CSS
content-start align-content: flex-start
content-center align-content: center
content-end align-content: flex-end
content-between align-content: space-between
content-around align-content: space-around

Align self（對齊自身）

Class CSS
self-auto align-self: auto
self-start align-self: flex-start
self-center align-self: center
self-end align-self: flex-end
self-stretch align-self: stretch

Justify content（內容對齊）

Class CSS
justify-start justify-content: flex-start
justify-center justify-content: center
justify-end justify-content: flex-end
justify-between justify-content: space-between
justify-around justify-content: space-around

Flex, grow, shrink（彈性、增長、收縮）

Class CSS
flex-initial flex: initial
flex-1 flex: 1
flex-auto flex: auto
flex-none flex: none
flex-grow flex-grow: 1
flex-shrink flex-shrink: 1
flex-no-grow flex-grow: 0
flex-no-shrink flex-shrink: 0

Modifiers（修飾符）

Hover（鼠標懸停）

在對應的class前加上hover:。