Tailwindのユーティリティクラスをブロックに割り当てることにより、カテゴリーメニューのフォントサイズを変更する方法を解説します。
フォントサイズに関するTailwindの主なユーティリティクラスは以下の通りです。
| クラス名 | 対応フォントサイズ |
|---|---|
| text-xs | 12px / 0.75rem |
| text-sm | 14px / 0.875rem |
| text-base | 16px / 1rem |
| text-lg | 18px / 1.125rem |
| text-xl | 20px / 1.25rem |
| text-2xl | 24px / 1.5rem |
| text-3xl | 30px / 1.875rem |
| text-4xl | 36px / 2.25rem |
| text-5xl | 48px / 3rem |
| text-6xl | 60px / 3.75rem |
| text-7xl | 72px / 4.5rem |
| text-8xl | 96px / 6rem |
| text-9xl | 128px / 8rem |
| text-[16px] | 16px（任意のpx値） |
| text-[1.5rem] | 1.5rem（任意のrem値） |
| text-[50%] | 50%（親要素のフォントサイズに対する任意の%値） |