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

extends	title
_layouts.markdown	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 {breakpoint}: 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 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