サイズ

​基本的な使い方

​固定サイズ

size-{number} または size-px を使用して、要素を固定の幅と高さに同時に設定します。

<div class="size-16 ...">size-16</div>
<div class="size-20 ...">size-20</div>
<div class="size-24 ...">size-24</div>
<div class="size-32 ...">size-32</div>
<div class="size-40 ...">size-40</div>

​パーセントサイズ

size-full を使用して、要素の幅と高さを親コンテナの幅と高さの100%に設定します。

<div class="h-56 p-2 ...">
  <div class="size-full ...">size-full</div>
</div>

​サイズのリセット

size-auto ユーティリティは、特定のブレークポイントなど、特定の条件下で要素に割り当てられた幅と高さを削除する必要がある場合に役立ちます。

<div class="size-full md:size-auto">
  <!-- ... -->
</div>

​条件付きの適用

​ホバー、フォーカス、その他の状態

Tailwind では、バリアントモディファイアを使用して、さまざまな状態でユーティリティクラスを条件付きで適用できます。たとえば、size-full ユーティリティを hover:size-full でのみ適用するには、hover.

<div class="size-48 hover:size-full">
  <!-- ... -->
</div>

利用可能なすべての状態修飾子の完全なリストについては、 ホバー、フォーカス、

​ブレークポイントとメディアクエリ

レスポンシブなブレークポイント、ダークモード、prefers-reduced-motionなどのメディアクエリをターゲットにするために、バリアント修飾子を使用することもできます。例えば、md:size-fullを使用すると、中程度の画面サイズ以上の場合にのみsize-fullユーティリティが適用されます。

<div class="size-48 md:size-full">
  <!-- ... -->
</div>

詳細については、以下のドキュメントを参照してください。 レスポンシブデザイン, ダークモードおよび その他のメディアクエリ修飾子.

​カスタム値の使用

​テーマのカスタマイズ

デフォルトでは、Tailwindのサイズスケールは、デフォルトの間隔スケールと、サイズ設定に特有の追加の値の組み合わせです。

tailwind.config.jsファイルのtheme.spacingまたはtheme.extend.spacingを編集することで、間隔スケールをカスタマイズできます。

module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }
}

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

module.exports = {
  theme: {
    extend: {
      size: {
        '128': '32rem',
      }
    }
  }
}

デフォルトテーマのカスタマイズの詳細については、テーマのカスタマイズに関するドキュメントを参照してください。

​任意の値を指定する

テーマに含めることが適切ではない、一度限りのsize値を使用する必要がある場合は角括弧を使用すると、任意の値を使い、その場でプロパティを生成できます。

<div class="size-[32rem]">
  <!-- ... -->
</div>

任意の値のサポートの詳細については、 任意の値を指定する ドキュメントを参照してください。