Opacity

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.";

", "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

Using a custom value

Responsive design