[Tailwind CSS] 設定 h1~h6 等標籤的文字大小

分享:

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;

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。