# カテゴリーのフォントサイズ変更

Tailwindのユーティリティクラスをブロックに割り当てることにより、カテゴリーメニューのフォントサイズを変更する方法を解説します。

{% @supademo/embed demoId="cm3nuqbau0zunahr780w90rvh" url="<https://app.supademo.com/demo/cm3nuqbau0zunahr780w90rvh>" %}

フォントサイズに関するTailwindの主なユーティリティクラスは以下の通りです。

<table><thead><tr><th width="234">クラス名</th><th>対応フォントサイズ</th></tr></thead><tbody><tr><td>text-xs</td><td>12px / 0.75rem</td></tr><tr><td>text-sm</td><td>14px / 0.875rem</td></tr><tr><td>text-base</td><td>16px / 1rem</td></tr><tr><td>text-lg</td><td>18px / 1.125rem</td></tr><tr><td>text-xl</td><td>20px / 1.25rem</td></tr><tr><td>text-2xl</td><td>24px / 1.5rem</td></tr><tr><td>text-3xl</td><td>30px / 1.875rem</td></tr><tr><td>text-4xl</td><td>36px / 2.25rem</td></tr><tr><td>text-5xl</td><td>48px / 3rem</td></tr><tr><td>text-6xl</td><td>60px / 3.75rem</td></tr><tr><td>text-7xl</td><td>72px / 4.5rem</td></tr><tr><td>text-8xl</td><td>96px / 6rem</td></tr><tr><td>text-9xl</td><td>128px / 8rem</td></tr><tr><td>text-[16px]</td><td>16px（任意のpx値）</td></tr><tr><td>text-[1.5rem]</td><td>1.5rem（任意のrem値）</td></tr><tr><td>text-[50%]</td><td>50%（親要素のフォントサイズに対する任意の%値）</td></tr></tbody></table>