不透明度を分ける

Tailwind CSS version
v1.4.0+

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

Class reference

Class
Properties
.divide-opacity-0--divide-opacity: 0;
.divide-opacity-25--divide-opacity: 0.25;
.divide-opacity-50--divide-opacity: 0.5;
.divide-opacity-75--divide-opacity: 0.75;
.divide-opacity-100--divide-opacity: 1;

使用方法

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

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

Responsive

特定のブレークポイントで要素間の境界線の不透明度を制御するには、既存の分割不透明度ユーティリティに {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のレスポンシブデザイン機能の詳細については、Responsive Designのドキュメントをご覧ください。

Customizing

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

  // 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',
        }
      }
    }
  }

デフォルトテーマのカスタマイズについてはtheme customization documentationをご覧ください。

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!