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

extends	title
_layouts.markdown	Opacity

Opacity

Responsive Customizing

Control the opacity of an element in Tailwind using the .opacity utilities.

@component('_partials.code-sample')

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

.opacity-{{ $name }}

@endforeach

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

.opacity-{{ $name }}

@endforeach @endslot @endcomponent

Responsive

To apply an opacity utility only at a specific breakpoint, add a {breakpoint}: prefix to the existing class name. For example, adding the class md:opacity-50 to an element would apply the opacity-50 utility at 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 a sensible numeric opacity scale. You can, of course, modify these values as needed. This is done in the opacity section of your Tailwind config.

@component('_partials.customized-config') @slot('default') { // ... opacity: { '0': '0', '25': '.25', '50': '.5', '75': '.75', '100': '1', } @endslot @slot('customized') { // ... opacity: { 'none': '0', '10': '.1', '20': '.2', '30': '.3', '40': '.4', '50': '.5', '60': '.6', '70': '.7', '80': '.8', '90': '.9', '100': '1', }, } @endslot @endcomponent