Tailwind Cheat Sheet（尾巴風速查表）
記錄了在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-100orange-200orange-300orange-400orange-500orange-600orange-700orange-800orange-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:。