Placeholder color

Utilities for controlling the color of placeholder text


Class reference

ClassProperties
placeholder-current::placeholdercolor: currentColor;
Aa
placeholder-transparent::placeholdercolor: transparent;
Aa
placeholder-black::placeholder--tw-placeholder-opacity: 1; color: rgba(0, 0, 0, var(--tw-placeholder-opacity));
Aa
placeholder-white::placeholder--tw-placeholder-opacity: 1; color: rgba(255, 255, 255, var(--tw-placeholder-opacity));
Aa
placeholder-gray-0::placeholder--tw-placeholder-opacity: 1; color: rgba(253, 248, 255, var(--tw-placeholder-opacity));
Aa
placeholder-gray-100::placeholder--tw-placeholder-opacity: 1; color: rgba(248, 246, 249, var(--tw-placeholder-opacity));
Aa
placeholder-gray-200::placeholder--tw-placeholder-opacity: 1; color: rgba(233, 231, 234, var(--tw-placeholder-opacity));
Aa
placeholder-gray-300::placeholder--tw-placeholder-opacity: 1; color: rgba(207, 203, 206, var(--tw-placeholder-opacity));
Aa
placeholder-gray-400::placeholder--tw-placeholder-opacity: 1; color: rgba(168, 163, 167, var(--tw-placeholder-opacity));
Aa
placeholder-gray-500::placeholder--tw-placeholder-opacity: 1; color: rgba(123, 116, 121, var(--tw-placeholder-opacity));
Aa
placeholder-gray-600::placeholder--tw-placeholder-opacity: 1; color: rgba(81, 75, 79, var(--tw-placeholder-opacity));
Aa
placeholder-gray-700::placeholder--tw-placeholder-opacity: 1; color: rgba(52, 46, 50, var(--tw-placeholder-opacity));
Aa
placeholder-gray-800::placeholder--tw-placeholder-opacity: 1; color: rgba(35, 30, 33, var(--tw-placeholder-opacity));
Aa
placeholder-gray-900::placeholder--tw-placeholder-opacity: 1; color: rgba(26, 18, 23, var(--tw-placeholder-opacity));
Aa
placeholder-gray::placeholder--tw-placeholder-opacity: 1; color: rgba(233, 231, 234, var(--tw-placeholder-opacity));
Aa
placeholder-violet-0::placeholder--tw-placeholder-opacity: 1; color: rgba(246, 243, 255, var(--tw-placeholder-opacity));
Aa
placeholder-violet-100::placeholder--tw-placeholder-opacity: 1; color: rgba(239, 228, 255, var(--tw-placeholder-opacity));
Aa
placeholder-violet-200::placeholder--tw-placeholder-opacity: 1; color: rgba(220, 196, 255, var(--tw-placeholder-opacity));
Aa
placeholder-violet-300::placeholder--tw-placeholder-opacity: 1; color: rgba(189, 144, 255, var(--tw-placeholder-opacity));
Aa
placeholder-violet-400::placeholder--tw-placeholder-opacity: 1; color: rgba(148, 78, 250, var(--tw-placeholder-opacity));
Aa
placeholder-violet-500::placeholder--tw-placeholder-opacity: 1; color: rgba(104, 12, 233, var(--tw-placeholder-opacity));
Aa
placeholder-violet-600::placeholder--tw-placeholder-opacity: 1; color: rgba(89, 0, 190, var(--tw-placeholder-opacity));
Aa
placeholder-violet-700::placeholder--tw-placeholder-opacity: 1; color: rgba(73, 0, 143, var(--tw-placeholder-opacity));
Aa
placeholder-violet-800::placeholder--tw-placeholder-opacity: 1; color: rgba(53, 0, 97, var(--tw-placeholder-opacity));
Aa
placeholder-violet-900::placeholder--tw-placeholder-opacity: 1; color: rgba(30, 0, 51, var(--tw-placeholder-opacity));
Aa
placeholder-violet::placeholder--tw-placeholder-opacity: 1; color: rgba(104, 12, 233, var(--tw-placeholder-opacity));
Aa
placeholder-magenta-0::placeholder--tw-placeholder-opacity: 1; color: rgba(251, 243, 255, var(--tw-placeholder-opacity));
Aa
placeholder-magenta-100::placeholder--tw-placeholder-opacity: 1; color: rgba(247, 221, 255, var(--tw-placeholder-opacity));
Aa
placeholder-magenta-200::placeholder--tw-placeholder-opacity: 1; color: rgba(239, 184, 253, var(--tw-placeholder-opacity));
Aa
placeholder-magenta-300::placeholder--tw-placeholder-opacity: 1; color: rgba(229, 131, 247, var(--tw-placeholder-opacity));
Aa
placeholder-magenta-400::placeholder--tw-placeholder-opacity: 1; color: rgba(213, 67, 237, var(--tw-placeholder-opacity));
Aa
placeholder-magenta-500::placeholder--tw-placeholder-opacity: 1; color: rgba(191, 4, 220, var(--tw-placeholder-opacity));
Aa
placeholder-magenta-600::placeholder--tw-placeholder-opacity: 1; color: rgba(180, 0, 186, var(--tw-placeholder-opacity));
Aa
placeholder-magenta-700::placeholder--tw-placeholder-opacity: 1; color: rgba(146, 0, 138, var(--tw-placeholder-opacity));
Aa
placeholder-magenta-800::placeholder--tw-placeholder-opacity: 1; color: rgba(99, 0, 86, var(--tw-placeholder-opacity));
Aa
placeholder-magenta-900::placeholder--tw-placeholder-opacity: 1; color: rgba(51, 0, 41, var(--tw-placeholder-opacity));
Aa
placeholder-magenta::placeholder--tw-placeholder-opacity: 1; color: rgba(191, 4, 220, var(--tw-placeholder-opacity));
Aa
placeholder-blue-0::placeholder--tw-placeholder-opacity: 1; color: rgba(244, 253, 255, var(--tw-placeholder-opacity));
Aa
placeholder-blue-100::placeholder--tw-placeholder-opacity: 1; color: rgba(194, 235, 253, var(--tw-placeholder-opacity));
Aa
placeholder-blue-200::placeholder--tw-placeholder-opacity: 1; color: rgba(144, 201, 247, var(--tw-placeholder-opacity));
Aa
placeholder-blue-300::placeholder--tw-placeholder-opacity: 1; color: rgba(100, 160, 235, var(--tw-placeholder-opacity));
Aa
placeholder-blue-400::placeholder--tw-placeholder-opacity: 1; color: rgba(65, 119, 216, var(--tw-placeholder-opacity));
Aa
placeholder-blue-500::placeholder--tw-placeholder-opacity: 1; color: rgba(39, 83, 191, var(--tw-placeholder-opacity));
Aa
placeholder-blue-600::placeholder--tw-placeholder-opacity: 1; color: rgba(22, 55, 161, var(--tw-placeholder-opacity));
Aa
placeholder-blue-700::placeholder--tw-placeholder-opacity: 1; color: rgba(11, 35, 129, var(--tw-placeholder-opacity));
Aa
placeholder-blue-800::placeholder--tw-placeholder-opacity: 1; color: rgba(5, 21, 96, var(--tw-placeholder-opacity));
Aa
placeholder-blue-900::placeholder--tw-placeholder-opacity: 1; color: rgba(2, 13, 64, var(--tw-placeholder-opacity));
Aa
placeholder-blue::placeholder--tw-placeholder-opacity: 1; color: rgba(100, 160, 235, var(--tw-placeholder-opacity));
Aa
placeholder-teal-0::placeholder--tw-placeholder-opacity: 1; color: rgba(244, 255, 252, var(--tw-placeholder-opacity));
Aa
placeholder-teal-100::placeholder--tw-placeholder-opacity: 1; color: rgba(190, 248, 236, var(--tw-placeholder-opacity));
Aa
placeholder-teal-200::placeholder--tw-placeholder-opacity: 1; color: rgba(135, 232, 220, var(--tw-placeholder-opacity));
Aa
placeholder-teal-300::placeholder--tw-placeholder-opacity: 1; color: rgba(87, 205, 200, var(--tw-placeholder-opacity));
Aa
placeholder-teal-400::placeholder--tw-placeholder-opacity: 1; color: rgba(50, 164, 168, var(--tw-placeholder-opacity));
Aa
placeholder-teal-500::placeholder--tw-placeholder-opacity: 1; color: rgba(26, 119, 127, var(--tw-placeholder-opacity));
Aa
placeholder-teal-600::placeholder--tw-placeholder-opacity: 1; color: rgba(12, 81, 90, var(--tw-placeholder-opacity));
Aa
placeholder-teal-700::placeholder--tw-placeholder-opacity: 1; color: rgba(5, 54, 62, var(--tw-placeholder-opacity));
Aa
placeholder-teal-800::placeholder--tw-placeholder-opacity: 1; color: rgba(2, 39, 45, var(--tw-placeholder-opacity));
Aa
placeholder-teal-900::placeholder--tw-placeholder-opacity: 1; color: rgba(1, 32, 38, var(--tw-placeholder-opacity));
Aa
placeholder-teal::placeholder--tw-placeholder-opacity: 1; color: rgba(87, 205, 200, var(--tw-placeholder-opacity));
Aa
placeholder-green-0::placeholder--tw-placeholder-opacity: 1; color: rgba(246, 255, 244, var(--tw-placeholder-opacity));
Aa
placeholder-green-100::placeholder--tw-placeholder-opacity: 1; color: rgba(192, 248, 190, var(--tw-placeholder-opacity));
Aa
placeholder-green-200::placeholder--tw-placeholder-opacity: 1; color: rgba(135, 232, 145, var(--tw-placeholder-opacity));
Aa
placeholder-green-300::placeholder--tw-placeholder-opacity: 1; color: rgba(87, 205, 113, var(--tw-placeholder-opacity));
Aa
placeholder-green-400::placeholder--tw-placeholder-opacity: 1; color: rgba(50, 168, 87, var(--tw-placeholder-opacity));
Aa
placeholder-green-500::placeholder--tw-placeholder-opacity: 1; color: rgba(26, 127, 64, var(--tw-placeholder-opacity));
Aa
placeholder-green-600::placeholder--tw-placeholder-opacity: 1; color: rgba(12, 90, 45, var(--tw-placeholder-opacity));
Aa
placeholder-green-700::placeholder--tw-placeholder-opacity: 1; color: rgba(5, 62, 32, var(--tw-placeholder-opacity));
Aa
placeholder-green-800::placeholder--tw-placeholder-opacity: 1; color: rgba(2, 45, 23, var(--tw-placeholder-opacity));
Aa
placeholder-green-900::placeholder--tw-placeholder-opacity: 1; color: rgba(1, 38, 20, var(--tw-placeholder-opacity));
Aa
placeholder-green::placeholder--tw-placeholder-opacity: 1; color: rgba(87, 205, 113, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-0::placeholder--tw-placeholder-opacity: 1; color: rgba(255, 252, 244, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-100::placeholder--tw-placeholder-opacity: 1; color: rgba(249, 240, 191, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-200::placeholder--tw-placeholder-opacity: 1; color: rgba(234, 227, 136, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-300::placeholder--tw-placeholder-opacity: 1; color: rgba(206, 207, 88, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-400::placeholder--tw-placeholder-opacity: 1; color: rgba(162, 169, 51, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-500::placeholder--tw-placeholder-opacity: 1; color: rgba(114, 125, 25, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-600::placeholder--tw-placeholder-opacity: 1; color: rgba(74, 85, 11, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-700::placeholder--tw-placeholder-opacity: 1; color: rgba(48, 56, 5, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-800::placeholder--tw-placeholder-opacity: 1; color: rgba(33, 39, 2, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-900::placeholder--tw-placeholder-opacity: 1; color: rgba(27, 33, 1, var(--tw-placeholder-opacity));
Aa
placeholder-yellow::placeholder--tw-placeholder-opacity: 1; color: rgba(206, 207, 88, var(--tw-placeholder-opacity));
Aa
placeholder-orange-0::placeholder--tw-placeholder-opacity: 1; color: rgba(255, 247, 244, var(--tw-placeholder-opacity));
Aa
placeholder-orange-100::placeholder--tw-placeholder-opacity: 1; color: rgba(253, 208, 188, var(--tw-placeholder-opacity));
Aa
placeholder-orange-200::placeholder--tw-placeholder-opacity: 1; color: rgba(246, 171, 133, var(--tw-placeholder-opacity));
Aa
placeholder-orange-300::placeholder--tw-placeholder-opacity: 1; color: rgba(233, 140, 85, var(--tw-placeholder-opacity));
Aa
placeholder-orange-400::placeholder--tw-placeholder-opacity: 1; color: rgba(214, 114, 47, var(--tw-placeholder-opacity));
Aa
placeholder-orange-500::placeholder--tw-placeholder-opacity: 1; color: rgba(187, 91, 22, var(--tw-placeholder-opacity));
Aa
placeholder-orange-600::placeholder--tw-placeholder-opacity: 1; color: rgba(155, 70, 6, var(--tw-placeholder-opacity));
Aa
placeholder-orange-700::placeholder--tw-placeholder-opacity: 1; color: rgba(121, 53, 0, var(--tw-placeholder-opacity));
Aa
placeholder-orange-800::placeholder--tw-placeholder-opacity: 1; color: rgba(85, 38, 0, var(--tw-placeholder-opacity));
Aa
placeholder-orange-900::placeholder--tw-placeholder-opacity: 1; color: rgba(51, 23, 0, var(--tw-placeholder-opacity));
Aa
placeholder-orange::placeholder--tw-placeholder-opacity: 1; color: rgba(233, 140, 85, var(--tw-placeholder-opacity));
Aa
placeholder-red-0::placeholder--tw-placeholder-opacity: 1; color: rgba(255, 244, 244, var(--tw-placeholder-opacity));
Aa
placeholder-red-100::placeholder--tw-placeholder-opacity: 1; color: rgba(253, 194, 196, var(--tw-placeholder-opacity));
Aa
placeholder-red-200::placeholder--tw-placeholder-opacity: 1; color: rgba(247, 144, 146, var(--tw-placeholder-opacity));
Aa
placeholder-red-300::placeholder--tw-placeholder-opacity: 1; color: rgba(235, 100, 103, var(--tw-placeholder-opacity));
Aa
placeholder-red-400::placeholder--tw-placeholder-opacity: 1; color: rgba(216, 65, 68, var(--tw-placeholder-opacity));
Aa
placeholder-red-500::placeholder--tw-placeholder-opacity: 1; color: rgba(191, 39, 42, var(--tw-placeholder-opacity));
Aa
placeholder-red-600::placeholder--tw-placeholder-opacity: 1; color: rgba(161, 22, 24, var(--tw-placeholder-opacity));
Aa
placeholder-red-700::placeholder--tw-placeholder-opacity: 1; color: rgba(129, 11, 13, var(--tw-placeholder-opacity));
Aa
placeholder-red-800::placeholder--tw-placeholder-opacity: 1; color: rgba(96, 5, 7, var(--tw-placeholder-opacity));
Aa
placeholder-red-900::placeholder--tw-placeholder-opacity: 1; color: rgba(64, 2, 3, var(--tw-placeholder-opacity));
Aa
placeholder-red::placeholder--tw-placeholder-opacity: 1; color: rgba(235, 100, 103, var(--tw-placeholder-opacity));
Aa
placeholder-pink-0::placeholder--tw-placeholder-opacity: 1; color: rgba(255, 244, 255, var(--tw-placeholder-opacity));
Aa
placeholder-pink-100::placeholder--tw-placeholder-opacity: 1; color: rgba(253, 194, 245, var(--tw-placeholder-opacity));
Aa
placeholder-pink-200::placeholder--tw-placeholder-opacity: 1; color: rgba(247, 144, 219, var(--tw-placeholder-opacity));
Aa
placeholder-pink-300::placeholder--tw-placeholder-opacity: 1; color: rgba(235, 100, 182, var(--tw-placeholder-opacity));
Aa
placeholder-pink-400::placeholder--tw-placeholder-opacity: 1; color: rgba(216, 65, 144, var(--tw-placeholder-opacity));
Aa
placeholder-pink-500::placeholder--tw-placeholder-opacity: 1; color: rgba(191, 39, 108, var(--tw-placeholder-opacity));
Aa
placeholder-pink-600::placeholder--tw-placeholder-opacity: 1; color: rgba(161, 22, 78, var(--tw-placeholder-opacity));
Aa
placeholder-pink-700::placeholder--tw-placeholder-opacity: 1; color: rgba(129, 11, 54, var(--tw-placeholder-opacity));
Aa
placeholder-pink-800::placeholder--tw-placeholder-opacity: 1; color: rgba(96, 5, 37, var(--tw-placeholder-opacity));
Aa
placeholder-pink-900::placeholder--tw-placeholder-opacity: 1; color: rgba(64, 2, 23, var(--tw-placeholder-opacity));
Aa
placeholder-pink::placeholder--tw-placeholder-opacity: 1; color: rgba(235, 100, 182, var(--tw-placeholder-opacity));
Aa
placeholder-light::placeholder--tw-placeholder-opacity: 1; color: rgba(253, 248, 255, var(--tw-placeholder-opacity));
Aa
placeholder-dark::placeholder--tw-placeholder-opacity: 1; color: rgba(52, 46, 50, var(--tw-placeholder-opacity));
Aa
placeholder-primary::placeholder--tw-placeholder-opacity: 1; color: rgba(104, 12, 233, var(--tw-placeholder-opacity));
Aa
placeholder-primary-light::placeholder--tw-placeholder-opacity: 1; color: rgba(148, 78, 250, var(--tw-placeholder-opacity));
Aa
placeholder-primary-dark::placeholder--tw-placeholder-opacity: 1; color: rgba(89, 0, 190, var(--tw-placeholder-opacity));
Aa
placeholder-secondary::placeholder--tw-placeholder-opacity: 1; color: rgba(30, 0, 51, var(--tw-placeholder-opacity));
Aa
placeholder-secondary-light::placeholder--tw-placeholder-opacity: 1; color: rgba(73, 0, 143, var(--tw-placeholder-opacity));
Aa
placeholder-secondary-dark::placeholder--tw-placeholder-opacity: 1; color: rgba(53, 0, 97, var(--tw-placeholder-opacity));
Aa
placeholder-info::placeholder--tw-placeholder-opacity: 1; color: rgba(100, 160, 235, var(--tw-placeholder-opacity));
Aa
placeholder-info-light::placeholder--tw-placeholder-opacity: 1; color: rgba(144, 201, 247, var(--tw-placeholder-opacity));
Aa
placeholder-info-dark::placeholder--tw-placeholder-opacity: 1; color: rgba(65, 119, 216, var(--tw-placeholder-opacity));
Aa
placeholder-success::placeholder--tw-placeholder-opacity: 1; color: rgba(87, 205, 113, var(--tw-placeholder-opacity));
Aa
placeholder-success-light::placeholder--tw-placeholder-opacity: 1; color: rgba(135, 232, 145, var(--tw-placeholder-opacity));
Aa
placeholder-success-dark::placeholder--tw-placeholder-opacity: 1; color: rgba(50, 168, 87, var(--tw-placeholder-opacity));
Aa
placeholder-warning::placeholder--tw-placeholder-opacity: 1; color: rgba(206, 207, 88, var(--tw-placeholder-opacity));
Aa
placeholder-warning-light::placeholder--tw-placeholder-opacity: 1; color: rgba(234, 227, 136, var(--tw-placeholder-opacity));
Aa
placeholder-warning-dark::placeholder--tw-placeholder-opacity: 1; color: rgba(162, 169, 51, var(--tw-placeholder-opacity));
Aa
placeholder-danger::placeholder--tw-placeholder-opacity: 1; color: rgba(235, 100, 103, var(--tw-placeholder-opacity));
Aa
placeholder-danger-light::placeholder--tw-placeholder-opacity: 1; color: rgba(247, 144, 146, var(--tw-placeholder-opacity));
Aa
placeholder-danger-dark::placeholder--tw-placeholder-opacity: 1; color: rgba(216, 65, 68, var(--tw-placeholder-opacity));
Aa
placeholder-brand-primary::placeholder--tw-placeholder-opacity: 1; color: rgba(104, 12, 233, var(--tw-placeholder-opacity));
Aa
placeholder-brand-accent::placeholder--tw-placeholder-opacity: 1; color: rgba(191, 4, 220, var(--tw-placeholder-opacity));
Aa
placeholder-brand-secondary::placeholder--tw-placeholder-opacity: 1; color: rgba(30, 0, 51, var(--tw-placeholder-opacity));
Aa
placeholder-brand-dark::placeholder--tw-placeholder-opacity: 1; color: rgba(37, 13, 46, var(--tw-placeholder-opacity));
Aa

# Usage

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

<input class="placeholder-gray-500 ..." placeholder="jane@example.com">
<input class="placeholder-red ..." placeholder="jane@example.com">

# Changing opacity

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

<input class="placeholder-gray-500 placeholder-opacity-100 ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 placeholder-opacity-75 ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 placeholder-opacity-50 ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 placeholder-opacity-25 ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 placeholder-opacity-0 ..." placeholder="jane@example.com">

Learn more in the placeholder opacity documentation.

# Responsive

To control the text color of an input placeholder at a specific breakpoint, add a {screen}: prefix to any existing text color utility. For example, use md:placeholder-green-500 to apply the placeholder-green-500 utility at only medium screen sizes and above.

<input class="placeholder-gray-500 **md:placeholder-green-500**" placeholder="jane@example.com">

For more information about Elements’ responsive design features, check out the Responsive Design documentation.

# 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.

<input class="placeholder-gray-600 focus:placeholder-gray-400 ..." placeholder="jane@example.com">

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

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