📦

【Tailwind和訳】LAYOUT/Visibility

2021/10/24に公開約1,900字

この記事について

この記事は、LAYOUT/Visibilityの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。


Visibility

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

デフォルトのクラス参照

クラス プロパティ
visible visiblity:visible;
invisible visibility: hidden;

Invisible

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

<div class="flex justify-center space-x-4">
  <div>1</div>
  <div class="invisible ...">2</div>
  <div>3</div>
</div>

Visible

要素を可視化するには、visibleを使用します。これは主に、異なるスクリーンサイズでのinvisibleユーティリティーを元に戻すのに便利です。

<div class="flex justify-center space-x-4">
  <div>1</div>
  <div class="visible ...">2</div>
  <div>3</div>
</div>

Responsive

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

<div class="visible md:invisible ..."></div>

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

Customizing

Variants

デフォルトでは、レスポンシブバリアントのみが可視化ユーティリティのために生成されます。

tailwind.config.jsファイルのvariantsセクションにあるvisibilityプロパティを変更することで、可視化ユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、この設定ではホバーとフォーカスのバリアントも生成されます。

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

Disabling

プロジェクトで可視化ユーティリティを使用しない場合は、設定ファイルのcorePluginsセクションでvisibilityプロパティをfalseに設定することで、完全に無効化することができます。

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

Discussion

ログインするとコメントできます