🔲

【Tailwind和訳】BORDERS/Divide Opacity

2021/10/24に公開約3,100字

この記事について

この記事は、BORDERS/Divide Opacityの記事を和訳したものです。

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

Divide Opacity

要素間の不透明度の境界を制御するためのユーティリティ。

Class Properties
divide-opacity-0 --tw-divide-opacity: 0;
divide-opacity-5 --tw-divide-opacity: 0.05;
divide-opacity-10 --tw-divide-opacity: 0.1;
divide-opacity-20 --tw-divide-opacity: 0.2;
divide-opacity-25 --tw-divide-opacity: 0.25;
divide-opacity-30 --tw-divide-opacity: 0.3;
divide-opacity-40 --tw-divide-opacity: 0.4;
divide-opacity-50 --tw-divide-opacity: 0.5;
divide-opacity-60 --tw-divide-opacity: 0.6;
divide-opacity-70 --tw-divide-opacity: 0.7;
divide-opacity-75 --tw-divide-opacity: 0.75;
divide-opacity-80 --tw-divide-opacity: 0.8;
divide-opacity-90 --tw-divide-opacity: 0.9;
divide-opacity-95 --tw-divide-opacity: 0.95;
divide-opacity-100 --tw-divide-opacity: 1;

使用法

divide-opacity- {amount}ユーティリティを使用して、要素間の境界線の不透明度を制御します。
Image from Gyazo

<div class="divide-y-4 divide-black divide-opacity-25">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

レスポンシブ

特定のブレークポイントで要素間の境界線の不透明度を制御するには、既存の不透明度分割ユーティリティに{screen}:プレフィックスを追加します。 たとえば、md:divide-opacity-50を使用して、中程度の画面サイズ以上でのみdivide-opacity-50ユーティリティを適用します。

<div class="divide-y-2 divide-blue-500 divide-opacity-75 md:divide-opacity-50">
  <!-- ... -->
</div>

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

カスタマイズ

すべての不透明度関連ユーティリティの不透明度値を一度にカスタマイズするには、tailwind.config.jsテーマ構成のopacityセクションを使用します。

tailwind.config.js
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        opacity: {
+         '10': '0.1',
+         '20': '0.2',
+         '95': '0.95',
        }
      }
    }
  }

不透明度の分割ユーティリティのみをカスタマイズする場合は、divideOpacityセクションを使用します。

tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        divideOpacity: {
+         '10': '0.1',
+         '20': '0.2',
+         '95': '0.95',
        }
      }
    }
  }

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

バリアント

デフォルトでは、不透明度分割ユーティリティに対して、レスポンシブモードとダークモード(有効な場合)のバリアントのみが生成されます。

tailwind.config.jsファイルのvariantsセクションでdivideOpacityプロパティを変更することにより、不透明度を分割するユーティリティ用に生成されるバリアントを制御できます。

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

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

無効化

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

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

Discussion

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