Placeholder Opacityv1.4.0+

@include('_partials.class-table', [ 'scroll' => true, 'rows' => $page->config['theme']['placeholderOpacity']->map(function ($value, $name) { $class = $name = ".placeholder-opacity-{$name}"; $code = "--placeholder-opacity: {$value};"; return [$class, $code]; }) ])

Usage

Control the opacity of an element's placeholder color using the .placeholder-opacity-{amount} utilities.

@component('_partials.code-sample')

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

Responsive

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

<input className="placeholder-opacity-75 md:placeholder-opacity-50 placeholder-gray-500" placeholder="jane@example.com"/>

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

Customizing

To customize the opacity values for all opacity-related utilities at once, use the opacity section of your tailwind.config.js theme configuration:

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

• '10': '0.1',
• '20': '0.2',
• '95': '0.95', @endcomponent

If you want to customize only the placeholder opacity utilities, use the placeholderOpacity section:

@component('_partials.customized-config', ['key' => 'theme.extend.placeholderOpacity'])

• '10': '0.1',
• '20': '0.2',
• '95': '0.95', @endcomponent

Learn more about customizing the default theme in the theme customization documentation.

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'placeholder opacity', 'property' => 'placeholderOpacity', ], 'variants' => $page->config['variants']['placeholderOpacity']->all(), ])