上/右/下/左

配置された要素の配置を制御するためのユーティリティ。

Class reference

Class
Properties
.inset-0top: 0; right: 0; bottom: 0; left: 0;
.inset-autotop: auto; right: auto; bottom: auto; left: auto;
.inset-y-0top: 0; bottom: 0;
.inset-x-0right: 0; left: 0;
.inset-y-autotop: auto; bottom: auto;
.inset-x-autoright: auto; left: auto;
.top-0top: 0;
.right-0right: 0;
.bottom-0bottom: 0;
.left-0left: 0;
.top-autotop: auto;
.right-autoright: auto;
.bottom-autobottom: auto;
.left-autoleft: auto;

使用方法

.{top|right|bottom|left|inset}-0ユーティリティを使用して、絶対位置にある要素を最も近い位置にある親の端のいずれかに固定します。

Tailwindのパディングおよびマージンユーティリティと組み合わせると、絶対位置の要素を正確に制御するために必要なのはこれらだけであることがわかるでしょう。

.inset-x-0.top-0

.inset-y-0.right-0

.inset-x-0.bottom-0

.inset-y-0.left-0

.inset-0

.left-0.top-0

.top-0.right-0

.right-0.bottom-0

.bottom-0.left-0

<!-- Span top edge -->
<div class="relative h-24 w-24 bg-gray-400">
  <div class="absolute inset-x-0 top-0 h-8 bg-gray-700"></div>
</div>

<!-- Span right edge -->
<div class="relative h-24 w-24 bg-gray-400">
  <div class="absolute inset-y-0 right-0 w-8 bg-gray-700"></div>
</div>

<!-- Span bottom edge -->
<div class="relative h-24 w-24 bg-gray-400">
  <div class="absolute inset-x-0 bottom-0 h-8 bg-gray-700"></div>
</div>

<!-- Span left edge -->
<div class="relative h-24 w-24 bg-gray-400">
  <div class="absolute inset-y-0 left-0 w-8 bg-gray-700"></div>
</div>

<!-- Fill entire parent -->
<div class="relative h-24 w-24 bg-gray-400">
  <div class="absolute inset-0 bg-gray-700"></div>
</div>

<!-- Pin to top left corner -->
<div class="relative h-24 w-24 bg-gray-400">
  <div class="absolute left-0 top-0 h-8 w-8 bg-gray-700"></div>
</div>

<!-- Pin to top right corner -->
<div class="relative h-24 w-24 bg-gray-400">
  <div class="absolute top-0 right-0 h-8 w-8 bg-gray-700"></div>
</div>

<!-- Pin to bottom right corner -->
<div class="relative h-24 w-24 bg-gray-400">
  <div class="absolute bottom-0 right-0 h-8 w-8 bg-gray-700"></div>
</div>

<!-- Pin to bottom left corner -->
<div class="relative h-24 w-24 bg-gray-400">
  <div class="absolute bottom-0 left-0 h-8 w-8 bg-gray-700"></div>
</div>

Responsive

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

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

<div class="relative h-32 bg-gray-400 p-4">
  <div class="absolute inset-0 sm:bottom-0 sm:left-0 md:top-0 md:inset-x-0 lg:right-0 lg:inset-y-0 xl:bottom-0 xl:inset-x-0"></div>
</div>
Responsive element

Customizing

Top / Right / Bottom / Left scale

デフォルトでは、Tailwindは0およびautoのtop/right/bottom/left/insetユーティリティのみを提供します。 tailwind.config.jsファイルのtheme.insetセクションを編集することで、これらを変更、追加、または削除できます。

  // tailwind.config.js
  module.exports = {
    theme: {
      inset: {
        '0': 0,
-       auto: 'auto',
+       '1/2': '50%',
      }
    }
  }

Negative values

Tailwindのnegative marginクラスと同じ形式の負のtop/right/bottom/leftクラスを追加する場合は、構成ファイルのキーの前にダッシュを付けます。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        inset: {
+         '-16': '-4rem',
        }
      }
    }
  }

Tailwindは、予想されるようなtop--16ではなく、先頭のダッシュが表示されたときに-top-16のようなクラスを生成するのに十分スマートです。

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

デフォルトでonly responsive バリアントはtop, right, bottom, left, and inset utilitiesのために作られます。

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!