Tailwind CSSでReactのpタグのフォントサイズを設定する方法

目次

Tailwind CSSでReactのpタグのフォントサイズを設定する方法

Tailwind CSSはユーティリティファーストのCSSフレームワークで、開発者が迅速に美しいデザインを構築できるよう支援します。
本記事では、Tailwind CSSを利用してReactの<p>タグのフォントサイズを設定する方法を学びます。

pタグのフォントサイズを設定する

Tailwind CSSで<p>タグのフォントサイズを設定するには、classNameプロパティを用いて以下のように記述します。

// src/App.js
function App() {
  return (
    <p className="text-lg">
      ここにテキストが入ります。
    </p>
  );
}

export default App;

上記のコードでは、<p>タグのフォントサイズはlg（large）に設定されています。
もちろん、text-lgの代わりに、text-smやtext-xlなど、他のサイズクラスを利用することもできます。

まとめ

Tailwind CSSを利用すれば、Reactの<p>タグのフォントサイズを簡単に変更することができます。
様々なサイズのクラスが提供されているので、デザインの調整が非常に効率的に行えます。