行の高さ

要素の先頭(行の高さ)を制御するためのユーティリティ。

Class reference

Class
Properties
.leading-3line-height: .75rem;
.leading-4line-height: 1rem;
.leading-5line-height: 1.25rem;
.leading-6line-height: 1.5rem;
.leading-7line-height: 1.75rem;
.leading-8line-height: 2rem;
.leading-9line-height: 2.25rem;
.leading-10line-height: 2.5rem;
.leading-noneline-height: 1;
.leading-tightline-height: 1.25;
.leading-snugline-height: 1.375;
.leading-normalline-height: 1.5;
.leading-relaxedline-height: 1.625;
.leading-looseline-height: 2;

Relative line-heights

leading-none,leading-tight,leading-snug,leading-normal,leading-relaxed,leading-looseユーティリティを使用して、 要素に現在のフォントサイズに基づく相対的な行の高さを指定します。

.leading-none

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-tight

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-snug

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-normal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-relaxed

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-loose

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

<p class="leading-none ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-tight ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-snug ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-normal ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-relaxed ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-loose ...">Lorem ipsum dolor sit amet ...</p>

Fixed line-heightsv1.2.0+

leading-{size}ユーティリティを使用して、現在のフォントサイズに関係なく、要素に固定の行の高さを指定します。 これらは、要素の最終的なサイズを非常に正確に制御する必要がある場合に役立ちます。

.leading-3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-7

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-8

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-9

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

.leading-10

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

<p class="leading-3 ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-4 ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-5 ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-6 ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-7 ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-8 ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-9 ...">Lorem ipsum dolor sit amet ...</p>
<p class="leading-10 ...">Lorem ipsum dolor sit amet ...</p>

レスポンシブ

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

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

<p class="leading-none sm:leading-tight md:leading-normal lg:leading-relaxed xl:leading-loose ...">Lorem ipsum dolor sit amet ...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

カスタマイズ

デフォルトでは、Tailwindは6つの相対ユーティリティと8つの固定line-heightユーティリティを提供します。 Tailwindテーマ設定のlineHeightセクションをカスタマイズして、これらを変更、追加、または削除します。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        lineHeight: {
+         'extra-loose': '2.5',
+         '12': '3rem',
        }
      }
    }
  }

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!