Opacity

@include('_partials.class-table', [ 'rows' => [ [ '.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%.", ], ] ])

Usage

Control the opacity of an element using the .opacity-{amount} utilities.

@component('_partials.code-sample')

@slot('code') @foreach ($page->config['theme']['opacity']->reverse() as $name => $value)@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

Opacity Scale

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

@component('_partials.customized-config', ['key' => 'theme.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

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'opacity', 'property' => 'opacity', ], 'variants' => [ 'responsive', 'hover', 'focus', ], ])