Tailwind CSS 在初始化後會把 h1~h6 的大小都變成預設瀏覽器文字大小，如果要設定各個標題標籤的大小的話，可以在 app.css 加上這段：
@tailwind base;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
h3 {
@apply text-lg;
}
}
其中文字大小的對應關係可以對照官網的文件 Font Size，對應的大小關係如下：
|
Class
|
Properties
|
|---|---|
| text-xs | font-size: 0.75rem; line-height: 1rem; |
| text-sm | font-size: 0.875rem; line-height: 1.25rem; |
| text-base | font-size: 1rem; line-height: 1.5rem; |
| text-lg | font-size: 1.125rem; line-height: 1.75rem; |
| text-xl | font-size: 1.25rem; line-height: 1.75rem; |
| text-2xl | font-size: 1.5rem; line-height: 2rem; |
| text-3xl | font-size: 1.875rem; line-height: 2.25rem; |
| text-4xl | font-size: 2.25rem; line-height: 2.5rem; |
| text-5xl | font-size: 3rem; line-height: 1; |
| text-6xl | font-size: 3.75rem; line-height: 1; |
| text-7xl | font-size: 4.5rem; line-height: 1; |
| text-8xl | font-size: 6rem; line-height: 1; |
| text-9xl | font-size: 8rem; line-height: 1; |
![[Tailwind CSS] 設定 h1~h6 等標籤的文字大小](/assets/upload/1611643654838_0.jpg)
