【Tailwind和訳】LAYOUT/Box Decoration Break

この記事について

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

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

Box Decoration Break

要素フラグメントを複数の行、列、またはページにまたがってレンダリングする方法を制御するためのユーティリティ。

Class	Properties
decoration-slice	box-decoration-break: slice;
decoration-clone	box-decoration-break: clone;

使用法

decoration-sliceおよびdecoration-cloneユーティリティを使用して、背景、境界線、境界線画像、ボックスシャドウ、クリップページ、マージン、パディングなどのプロパティを、要素が 1 つの連続したフラグメントであるかのようにレンダリングするか、個別のブロックであるかのようにレンダリングするかを制御します。

<span class="decoration-clone bg-gradient-to-b from-yellow-400 to-red-500 text-transparent ...">
  Hello<br />
  World
</span>

レスポンシブ

特定のブレークポイントで box-decoration-break プロパティを制御するには、既存の box-decoration-break ユーティリティに{screen}：プレフィックスを追加します。 たとえば、md：decoration-sliceを使用して、中程度の画面サイズ以上でのみdecoration-sliceユーティリティを適用します。

<div class="decoration-clone md:decoration-slice ...">
  <!-- ... -->
</div>

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

カスタマイズ

バリアント

デフォルトでは、box-decoration-break ユーティリティに対してレスポンシブバリアントのみが生成されます。

tailwind.config.jsファイルのvariantsセクションにあるboxDecorationBreakプロパティを変更することで、box-decoration-break ユーティリティ用に生成されるバリアントを制御できます。

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

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

無効化

プロジェクトで box-decoration-break ユーティリティを使用する予定がない場合は、構成ファイルのcorePluginsセクションでboxDecorationBreakプロパティをfalseに設定することで、ユーティリティを完全に無効にできます。

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