opacity.mdx

import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { TargetingSpecificStates } from "@/components/content.tsx";

export const title = "opacity"; export const description = "Utilities for controlling the opacity of an element.";

<ApiTable rows={[ ["opacity-", "opacity: %;"], ["opacity-()", "opacity: var();"], ["opacity-[]", "opacity: ;"], ]} />

Examples

Basic example

Use opacity-<number> utilities like opacity-25 and opacity-100 to set the opacity of an element:

{

opacity-100

Button A

opacity-75

Button B

opacity-50

Button C

opacity-25

Button D

}

<!-- [!code classes:opacity-100,opacity-75,opacity-50,opacity-25] -->
<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>

Applying conditionally

<TargetingSpecificStates element="input" elementAttributes={{ type: "text" }} variant="disabled" property="opacity" defaultClass="opacity-100" featuredClass="opacity-75" />

Using a custom value

Responsive design