Tailwind CSSでフォントウェイトを設定する方法

目次

Tailwind CSSでフォントウェイトを設定する方法

Tailwind CSSは、ユーティリティファーストのCSSフレームワークであり、さまざまなスタイリングオプションをクラスベースで提供します。
その中でも、フォントウェイト（文字の太さ）を設定するのはとても簡単です。
本記事では、Tailwind CSSを使用してフォントウェイトを指定する方法について説明します。

基本的なフォントウェイトのクラス

Tailwind CSSでは、以下のクラスを使用して、異なるフォントウェイトを指定できます。

• font-thin - フォントウェイト 100
• font-extralight - フォントウェイト 200
• font-light - フォントウェイト 300
• font-normal - フォントウェイト 400
• font-medium - フォントウェイト 500
• font-semibold - フォントウェイト 600
• font-bold - フォントウェイト 700
• font-extrabold - フォントウェイト 800
• font-black - フォントウェイト 900

これらのクラスをHTML要素に適用することで、簡単にフォントウェイトを調整できます。

例：太字のテキスト

太字のテキストを表示するには、font-bold クラスを使用します。

<p class="font-bold">これは太字のテキストです。<br></p>

このコードでは、<p> 要素内のテキストが太字で表示されます。

カスタムフォントウェイト

Tailwind CSSでは、configファイルを編集することでカスタムフォントウェイトを追加することもできます。
これにより、プロジェクト固有のフォントウェイト要件に柔軟に対応できます。

カスタムフォントウェイトを追加するには、tailwind.config.js ファイルを編集し、extend セクションに新しいフォントウェイト値を追加します。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontWeight: {
        'custom': 950, // カスタムフォントウェイト
      }
    }
  }
}

この設定により、font-custom クラスを使用して、フォントウェイト 950 を適用できます。

Tailwind CSSを使用することで、フォントウェイトの調整は非常に簡単かつ直感的になります。
これにより、デザインの一貫性を保ちつつ、スピーディーな開発が可能になります。