Placeholder Colorv1.1.0+

@include('_partials.placeholder-color-class-table', [ 'rows' => $page->config['theme']['colors']->flatMap(function ($colors, $name) { if (is_string($colors)) { return [ [".placeholder-{$name}", "color: {$colors};"] ]; }

return collect($colors)->map(function ($value, $key) use ($name) {
  $class = ".placeholder-{$name}-{$key}";
  $code = "color: {$value};";
  return [
    $class,
    $code,
  ];
});

})->values()->all() ])

Usage

Control the placeholder color of an element using the .placeholder-{color} utilities.

@component('_partials.code-sample', ['class' => 'text-center p-6'])

@slot('code')@endslot @endcomponent

Changing opacityv1.4.0+

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

Learn more in the placeholder opacity documentation.

Responsive

To control the text color of an element at a specific breakpoint, add a {screen}: prefix to any existing text color utility. For example, use md:text-green-600 to apply the text-green-600 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', ['class' => 'text-center']) @slot('none')

@endslot @slot('sm')@endslot @slot('md')@endslot @slot('lg')@endslot @slot('xl')@endslot @slot('code')@endslot @endcomponent

Focus

To control the placeholder color of an element on focus, add the focus: prefix to any existing placeholder color utility. For example, use focus:placeholder-blue-600 to apply the placeholder-blue-600 utility on focus.

@component('_partials.code-sample', ['class' => 'text-center p-6'])

@slot('code')@endslot @endcomponent

Focus utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix.

<input className="... md:placeholder-gray-900 md:focus:placeholder-red-600 ..."/>

Customizing

Placeholder Colors

By default Tailwind makes the entire default color palette available as placeholder colors.

You can customize your color palette by editing theme.colors in your tailwind.config.js file, or customize just your placeholder colors in the theme.textColor section.

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

• placeholderColor: theme => theme('colors'),

• placeholderColor: {
•   'primary': '#3490dc',
•   'secondary': '#ffed4a',
•   'danger': '#e3342f',
• } @endcomponent

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