opacity

例

基本例

要素のopacityを設定するには、opacity-<number> ユーティリティ（opacity-25 や opacity-100 など）を使用します。

<button class="bg-indigo-500 opacity-100 ..."></button>
<button class="bg-indigo-500 opacity-75 ..."></button>
<button class="bg-indigo-500 opacity-50 ..."></button>
<button class="bg-indigo-500 opacity-25 ..."></button>

条件付きで適用する

プレフィックスan opacity ユーティリティをバリアントで disabled:* のようにプレフィックスして、その状態でのみユーティリティを適用します。

<input class="opacity-100 disabled:opacity-75 ..." type="text" />

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。

カスタム値の使用

以下を使用してください opacity-[<value>] 構文 を設定するにはopacity完全にカスタムの値に基づいて

<button class="opacity-[.67] ...">
  <!-- ... -->
</button>

CSS変数については、以下も使用できます。 opacity-(<custom-property>) 構文

<button class="opacity-(--my-opacity) ...">
  <!-- ... -->
</button>

これは単なるショートハンドです opacity-[var(<custom-property>)] var() 関数を自動的に追加します。

レスポンシブデザイン

プレフィックスan opacity ユーティリティ md: のようなブレークポイントバリアントとともに使用して、medium スクリーンサイズ以上でのみユーティリティを適用します。

<button class="opacity-50 md:opacity-100 ...">
  <!-- ... -->
</button>

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。