フォントサイズ

要素のフォントサイズを制御するためのユーティリティ。

Class reference

Class
Properties
.text-xsfont-size: 0.75rem;
.text-smfont-size: 0.875rem;
.text-basefont-size: 1rem;
.text-lgfont-size: 1.125rem;
.text-xlfont-size: 1.25rem;
.text-2xlfont-size: 1.5rem;
.text-3xlfont-size: 1.875rem;
.text-4xlfont-size: 2.25rem;
.text-5xlfont-size: 3rem;
.text-6xlfont-size: 4rem;

使用方法

.text-{size}ユーティリティを使用して、要素のフォントサイズを制御します。

.text-xs

The quick brown fox jumped over the lazy dog.

.text-sm

The quick brown fox jumped over the lazy dog.

.text-base

The quick brown fox jumped over the lazy dog.

.text-lg

The quick brown fox jumped over the lazy dog.

.text-xl

The quick brown fox jumped over the lazy dog.

.text-2xl

The quick brown fox jumped over the lazy dog.

.text-3xl

The quick brown fox jumped over the lazy dog.

.text-4xl

The quick brown fox jumped over the lazy dog.

.text-5xl

The quick brown fox jumped over the lazy dog.

.text-6xl

The quick brown fox jumped over the lazy dog.

<p class="text-xs ...">The quick brown fox ...</p>
<p class="text-sm ...">The quick brown fox ...</p>
<p class="text-base ...">The quick brown fox ...</p>
<p class="text-lg ...">The quick brown fox ...</p>
<p class="text-xl ...">The quick brown fox ...</p>
<p class="text-2xl ...">The quick brown fox ...</p>
<p class="text-3xl ...">The quick brown fox ...</p>
<p class="text-4xl ...">The quick brown fox ...</p>
<p class="text-5xl ...">The quick brown fox ...</p>
<p class="text-6xl ...">The quick brown fox ...</p>

レスポンシブ

特定のブレークポイントで要素のフォントサイズを制御するには、既存のフォントサイズユーティリティに {screen}:プレフィックスを追加します。 たとえば、md:text-lgを使用して、中程度の画面サイズ以上でのみtext-lgユーティリティを適用します。

Tailwindのレスポンシブデザイン機能の詳細については、Responsive Designのドキュメントをご覧ください。

<p class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl ...">The quick brown fox jumped over the lazy dog.</p>

The quick brown fox jumped over the lazy dog.

カスタマイズ

フォントサイズ

デフォルトでは、Tailwindは10個のfont-sizeユーティリティを提供します。 Tailwindコンフィグのtheme.fontSizeセクションを編集して、これらを変更、追加、または削除します。

  // tailwind.config.js
  module.exports = {
    theme: {
      fontSize: {
-       'xs': '.75rem',
-       'sm': '.875rem',
+       'tiny': '.875rem',
        'base': '1rem',
        'lg': '1.125rem',
        'xl': '1.25rem',
        '2xl': '1.5rem',
-       '3xl': '1.875rem',
-       '4xl': '2.25rem',
        '5xl': '3rem',
        '6xl': '4rem',
+       '7xl': '5rem',
      }
    }
  }

デフォルトの行の高さを提供するv1.3.0+

tailwind.config.jsファイルの[fontSize、lineHeight]形式のタプルを使用して、各フォントサイズのデフォルトの行の高さを指定できます。

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      sm: ['14px', '20px'],
      base: ['16px', '24px'],
      lg: ['20px', '28px'],
      xl: ['24px', '32px'],
    }
  }
}

下位互換性の理由から、設定せずに実行することはありませんが、独自のプロジェクトで作成するのは非常に便利なカスタマイズになる可能性があります。

デフォルトの文字間隔を提供するv1.7.0+

フォントサイズのデフォルトの文字間隔値も指定する場合は、tailwind.config.jsファイルで[fontSize、{letterSpacing、lineHeight}]の形式のタプルを使用して指定できます。

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      // Or with a default line-height as well
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        lineHeight: '40px',
      }],
    }
  }
}

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはtext sizing utilitiesのために作られます。

あなたはどのバリアントがtext sizing utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのfontSizeプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     fontSize: ['responsive'],
+     fontSize: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしtext sizing utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのfontSize propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     fontSize: false,
    }
  }

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!