可視性

要素の可視性を制御するためのユーティリティ。

Class reference

Class
Properties
.visiblevisibility: visible;
.invisiblevisibility: hidden;

Visible

.visibleを使用して、要素を表示します。これは主に、さまざまな画面サイズで.invisibleユーティリティを元に戻す場合に役立ちます。

<div class="flex justify-center">
  <div class="bg-gray-400"></div>
  <div class="bg-gray-600 visible"></div>
  <div class="bg-gray-400"></div>
</div>

Invisible

.invisibleを使用して要素を非表示にしますが、それでもDOM内での位置を維持し、他の要素のレイアウトに影響を与えます。(displayドキュメントの.hiddenと比較してください)

<div class="flex justify-center">
  <div class="bg-gray-400"></div>
  <div class="bg-gray-600 invisible"></div>
  <div class="bg-gray-400"></div>
</div>

Responsive

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

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

<div class="flex justify-center">
  <div class="bg-gray-400"></div>
  <div class="bg-gray-600 visible sm:invisible md:visible lg:invisible xl:visible"></div>
  <div class="bg-gray-400"></div>
</div>

Customizing

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!