text-lg・text-baseは何px？Tailwind CSS文字サイズ一覧

<h1 class="text-2xl font-bold leading-tight text-slate-900">
  Tailwind CSSの文字サイズ
</h1>
<p class="mt-3 text-base leading-relaxed text-slate-700">
  本文は16pxを基準に、読みやすい行間を合わせます。
</p>

<p class="text-sm">14px（0.875rem）</p>
<p class="text-base">16px（1rem）デフォルト</p>
<p class="text-lg">18px（1.125rem）</p>
<p class="text-xl">20px（1.25rem）</p>
<p class="text-2xl">24px（1.5rem）</p>
<p class="text-3xl">30px（1.875rem）</p>
<p class="text-4xl">36px（2.25rem）</p>

<h1 class="text-2xl font-bold leading-tight md:text-4xl lg:text-5xl">
  画面幅に合わせて大きくなる見出し
</h1>
 
<p class="mt-4 text-base leading-relaxed md:text-lg">
  スマートフォンでは16px、md以上では18pxで表示します。
</p>

<p class="font-sans">通常のUIテキスト</p>
<p class="font-serif">少し雰囲気を変えたい見出し</p>
<p class="font-mono">npm run dev</p>

<p class="font-normal">通常（400）</p>
<p class="font-medium">やや太め（500）</p>
<p class="font-semibold">セミボールド（600）</p>
<p class="font-bold">ボールド（700）</p>

<p class="leading-tight">行間狭い（1.25）— 見出し向け</p>
<p class="leading-normal">通常（1.5）</p>
<p class="leading-relaxed">ゆとりあり（1.625）— 本文向け</p>
<p class="leading-loose">広め（2）</p>

<h2 class="text-2xl font-bold leading-tight">
  複数行になっても締まって見える見出し
</h2>
<p class="mt-3 text-base leading-relaxed">
  長めの本文では行間を少し広げると、行を追いやすくなります。
</p>

<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">
  Typography
</p>
<h2 class="text-3xl font-bold tracking-tight">
  読みやすい見出し
</h2>

<p class="text-center">中央揃え</p>
<p class="text-right">右揃え</p>
 
<p class="text-slate-600">落ち着いた本文色</p>
<p class="text-blue-600">リンクや強調に使う青</p>
<p class="text-red-500">エラーや警告の赤</p>

<!-- ボタン内の短いラベルを1行に保つ -->
<button class="whitespace-nowrap rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white">
  今すぐ登録
</button>
 
<!-- 長いURLでカード幅が壊れないようにする -->
<p class="break-words text-sm text-slate-600">
  https://example.com/very/long/path/that/should/wrap
</p>

<!-- 1行で省略 -->
<p class="truncate">長いテキストが...で省略されます</p>
 
<!-- 複数行で省略 -->
<p class="line-clamp-2">2行で省略されるテキスト...</p>
<p class="line-clamp-3">3行で省略されるテキスト...</p>

npm install @tailwindcss/typography

<article class="prose prose-lg max-w-none">
  <!-- 見出し・段落・リスト・コードが美しくスタイリングされる -->
</article>

<!-- 詰まりすぎることがある -->
<h2 class="text-4xl font-bold leading-none">長い見出し</h2>
 
<!-- まずはこちらから試す -->
<h2 class="text-4xl font-bold leading-tight">長い見出し</h2>

<article class="prose max-w-none">
  <h2>記事の見出し</h2>
  <p>記事本文...</p>
 
  <div class="not-prose">
    <button class="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white">
      proseの影響を受けないボタン
    </button>
  </div>
</article>

<div class="flex min-w-0 gap-3">
  <p class="truncate text-sm font-medium">
    とても長いタイトルがここで省略されます
  </p>
</div>