- 固定サイズのフォント:
Tailwind CSSでは、特定のサイズのフォントを指定するためのクラスが用意されています。例えば、
text-xsは最小のサイズ、text-smは小さいサイズ、text-lgは大きいサイズ、text-xlは最大のサイズを表します。これらのクラスを要素に適用することで、フォントサイズを指定できます。
<p class="text-lg">大きいサイズのテキスト</p>- 相対サイズのフォント:
Tailwind CSSでは、相対サイズのフォントを指定するためのクラスも用意されています。例えば、
text-xsは最小のサイズから相対的に縮小されたフォントを表し、text-xlは最大のサイズから相対的に拡大されたフォントを表します。これらのクラスを使用することで、要素のサイズに応じてフォントサイズを調整できます。
<p class="text-sm lg:text-xl">小さいサイズのテキスト (モバイルでは相対的に拡大)</p>- カスタムサイズのフォント:
Tailwind CSSでは、カスタムサイズのフォントを指定するためのクラスも作成することができます。
fontSizeプロパティを使用して、自分自身でフォントサイズのクラスを定義することができます。
<p class="text-custom-font-size">カスタムサイズのフォント</p>.text-custom-font-size {
font-size: 20px;
}これらは、Tailwind CSSでフォントサイズを設定するための基本的な方法です。さまざまなクラスを組み合わせることで、より高度なフォントサイズの制御が可能です。詳細な情報については、Tailwind CSSの公式ドキュメントを参照してください。