高さ

要素の高さを設定するためのユーティリティ。

Class reference

Class
Properties
.h-0height: 0;
.h-1height: 0.25rem;
.h-2height: 0.5rem;
.h-3height: 0.75rem;
.h-4height: 1rem;
.h-5height: 1.25rem;
.h-6height: 1.5rem;
.h-8height: 2rem;
.h-10height: 2.5rem;
.h-12height: 3rem;
.h-16height: 4rem;
.h-20height: 5rem;
.h-24height: 6rem;
.h-32height: 8rem;
.h-40height: 10rem;
.h-48height: 12rem;
.h-56height: 14rem;
.h-64height: 16rem;
.h-autoheight: auto;
.h-pxheight: 1px;
.h-fullheight: 100%;
.h-screenheight: 100vh;

Auto

h-autoを使用して、ブラウザに要素の高さを決定させます。

h-auto
<div class="h-auto w-32 p-6 ...">h-auto</div>

Screen height

h-screenを使用して、要素がビューポートの高さ全体に広がるようにします。

<div class="bg-gray-400 h-screen"></div>

Fixed height

要素を固定の高さに設定するには、h-{number}またはh-pxを使用します。

h-8

h-12

h-16

<div class="h-8 w-8 ..."></div>
<div class="h-12 w-12 ..."></div>
<div class="h-16 w-16 ..."></div>

Full height

親が定義された高さを持っている限りh-fullを使用して、要素の高さをその親の100%に設定します。

h-full
<div class="h-48">
  <div class="h-full p-6 bg-gray-400">h-full</div>
</div>

Responsive

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

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

<div class="h-8 sm:h-12 md:h-16 lg:h-20 xl:h-24 w-32 bg-gray-400"></div>

カスタマイズ

Height Scale

デフォルトでは、Tailwindの高さスケールはdefault spacing scaleと、高さに固有のいくつかの追加値の組み合わせです。

tailwind.config.jsファイルのtheme.spacingセクションで、パディング、マージン、幅、高さの間隔スケールを一度にカスタマイズできます。

  // tailwind.config.js
  module.exports = {
    theme: {
      spacing: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

高さを個別にカスタマイズするにはtailwind.config.jsファイルのtheme.heightセクションを使用します。

  // tailwind.config.js
  module.exports = {
    theme: {
      height: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!