Fontの使い方

Font size

Tailwind CSSでフォントのサイズを指定するには、次のクラスを指定します。

Font size in Tailwind CSS
Class CSS property
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;
text-6xl font-size: 4rem;
<div class="text-xs">.text-xs</div>
<div class="text-sm">.text-sm</div>
<div class="text-base">.text-base</div>
<div class="text-lg">.text-lg</div>
<div class="text-xl">.text-xl</div>
<div class="text-2xl">.text-2xl</div>
<div class="text-3xl">.text-3xl</div>
<div class="text-4xl">.text-4xl</div>
<div class="text-5xl">.text-5xl</div>
<div class="text-6xl">.text-6xl</div>
.text-xs
.text-sm
.text-base
.text-lg
.text-xl
.text-2xl
.text-3xl
.text-4xl
.text-5xl
.text-6xl

Tailwind CSSでは、見出し (h1 - h6) の文字を自動的に大きくすることはしません。

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

H1

H2

H3

H4

H5
H6

見出し文字を大きくしたければ、明示的にクラスを指定する必要があります。

<h1 class="text-6xl">H1</h1>
<h2 class="text-5xl">H2</h2>
<h3 class="text-4xl">H3</h3>
<h4 class="text-3xl">H4</h4>
<h5 class="text-2xl">H5</h5>
<h6 class="text-xl">H6</h6>

H1

H2

H3

H4

H5
H6