tailwindcss/docs/source/docs/opacity.blade.md

extends	title
_layouts.documentation	Opacity

Opacity

Utilities for controlling the opacity of an element.

@include('_partials.feature-badges', [ 'responsive' => true, 'customizable' => true, 'hover' => false, 'focus' => false ])

Class	Properties	Description
.opacity-100	opacity: 1;	Set the opacity of an element to 100%.
.opacity-75	opacity: .75;	Set the opacity of an element to 75%.
.opacity-50	opacity: .5;	Set the opacity of an element to 50%.
.opacity-25	opacity: .25;	Set the opacity of an element to 25%.
.opacity-0	opacity: 0;	Set the opacity of an element to 0%.

Example

@component('_partials.code-sample')

@foreach ($page->config['opacity']->reverse() as $name => $value)

.opacity-{{ $name }}

@endforeach

@slot('code') @foreach ($page->config['opacity']->reverse() as $name => $value)

.opacity-{{ $name }}

@endforeach @endslot @endcomponent

Responsive

To control the opacity of an element at a specific breakpoint, add a {screen}: prefix to any existing opacity utility. For example, use md:opacity-50 to apply the opacity-50 utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')

@endslot @slot('md')

@endslot @slot('lg')

@endslot @slot('xl')

@endslot @slot('code')

@endslot @endcomponent

Customizing

By default Tailwind provides five opacity utilities based on a simple numeric scale. You change, add, or remove these by editing the opacity section of your Tailwind config.

@component('_partials.customized-config', ['key' => 'opacity']) '0': '0',

• '25': '.25',
• '50': '.5',
• '75': '.75',

• '10': '.1',
• '20': '.2',
• '30': '.3',
• '40': '.4',
• '50': '.5',
• '60': '.6',
• '70': '.7',
• '80': '.8',
• '90': '.9', '100': '1', @endcomponent