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(248, 248, 250, var(--tw-placeholder-opacity));
Aa
placeholder-gray-100::placeholder--tw-placeholder-opacity: 1; color: rgba(242, 241, 246, var(--tw-placeholder-opacity));
Aa
placeholder-gray-200::placeholder--tw-placeholder-opacity: 1; color: rgba(229, 228, 233, var(--tw-placeholder-opacity));
Aa
placeholder-gray-300::placeholder--tw-placeholder-opacity: 1; color: rgba(204, 203, 209, var(--tw-placeholder-opacity));
Aa
placeholder-gray-400::placeholder--tw-placeholder-opacity: 1; color: rgba(169, 168, 175, var(--tw-placeholder-opacity));
Aa
placeholder-gray-500::placeholder--tw-placeholder-opacity: 1; color: rgba(119, 118, 127, var(--tw-placeholder-opacity));
Aa
placeholder-gray-600::placeholder--tw-placeholder-opacity: 1; color: rgba(85, 84, 93, var(--tw-placeholder-opacity));
Aa
placeholder-gray-700::placeholder--tw-placeholder-opacity: 1; color: rgba(53, 52, 60, var(--tw-placeholder-opacity));
Aa
placeholder-gray-800::placeholder--tw-placeholder-opacity: 1; color: rgba(34, 33, 40, var(--tw-placeholder-opacity));
Aa
placeholder-gray-900::placeholder--tw-placeholder-opacity: 1; color: rgba(15, 13, 22, var(--tw-placeholder-opacity));
Aa
placeholder-gray::placeholder--tw-placeholder-opacity: 1; color: rgba(229, 228, 233, var(--tw-placeholder-opacity));
Aa
placeholder-violet-0::placeholder--tw-placeholder-opacity: 1; color: rgba(248, 245, 255, var(--tw-placeholder-opacity));
Aa
placeholder-violet-100::placeholder--tw-placeholder-opacity: 1; color: rgba(237, 224, 254, var(--tw-placeholder-opacity));
Aa
placeholder-violet-200::placeholder--tw-placeholder-opacity: 1; color: rgba(215, 188, 253, var(--tw-placeholder-opacity));
Aa
placeholder-violet-300::placeholder--tw-placeholder-opacity: 1; color: rgba(180, 130, 250, var(--tw-placeholder-opacity));
Aa
placeholder-violet-400::placeholder--tw-placeholder-opacity: 1; color: rgba(149, 83, 248, 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(68, 0, 135, var(--tw-placeholder-opacity));
Aa
placeholder-violet-800::placeholder--tw-placeholder-opacity: 1; color: rgba(52, 0, 96, 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, 245, 255, var(--tw-placeholder-opacity));
Aa
placeholder-magenta-100::placeholder--tw-placeholder-opacity: 1; color: rgba(245, 222, 254, var(--tw-placeholder-opacity));
Aa
placeholder-magenta-200::placeholder--tw-placeholder-opacity: 1; color: rgba(238, 188, 252, var(--tw-placeholder-opacity));
Aa
placeholder-magenta-300::placeholder--tw-placeholder-opacity: 1; color: rgba(225, 129, 243, var(--tw-placeholder-opacity));
Aa
placeholder-magenta-400::placeholder--tw-placeholder-opacity: 1; color: rgba(200, 70, 224, 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(163, 0, 168, 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(122, 3, 115, var(--tw-placeholder-opacity));
Aa
placeholder-magenta-900::placeholder--tw-placeholder-opacity: 1; color: rgba(52, 0, 43, 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(229, 250, 255, var(--tw-placeholder-opacity));
Aa
placeholder-blue-100::placeholder--tw-placeholder-opacity: 1; color: rgba(198, 236, 252, var(--tw-placeholder-opacity));
Aa
placeholder-blue-200::placeholder--tw-placeholder-opacity: 1; color: rgba(163, 211, 251, var(--tw-placeholder-opacity));
Aa
placeholder-blue-300::placeholder--tw-placeholder-opacity: 1; color: rgba(118, 170, 239, var(--tw-placeholder-opacity));
Aa
placeholder-blue-400::placeholder--tw-placeholder-opacity: 1; color: rgba(75, 122, 217, var(--tw-placeholder-opacity));
Aa
placeholder-blue-500::placeholder--tw-placeholder-opacity: 1; color: rgba(33, 87, 206, var(--tw-placeholder-opacity));
Aa
placeholder-blue-600::placeholder--tw-placeholder-opacity: 1; color: rgba(31, 62, 170, var(--tw-placeholder-opacity));
Aa
placeholder-blue-700::placeholder--tw-placeholder-opacity: 1; color: rgba(13, 34, 126, var(--tw-placeholder-opacity));
Aa
placeholder-blue-800::placeholder--tw-placeholder-opacity: 1; color: rgba(1, 20, 94, var(--tw-placeholder-opacity));
Aa
placeholder-blue-900::placeholder--tw-placeholder-opacity: 1; color: rgba(0, 6, 47, var(--tw-placeholder-opacity));
Aa
placeholder-blue::placeholder--tw-placeholder-opacity: 1; color: rgba(118, 170, 239, var(--tw-placeholder-opacity));
Aa
placeholder-teal-0::placeholder--tw-placeholder-opacity: 1; color: rgba(214, 255, 245, var(--tw-placeholder-opacity));
Aa
placeholder-teal-100::placeholder--tw-placeholder-opacity: 1; color: rgba(181, 246, 233, var(--tw-placeholder-opacity));
Aa
placeholder-teal-200::placeholder--tw-placeholder-opacity: 1; color: rgba(118, 228, 215, var(--tw-placeholder-opacity));
Aa
placeholder-teal-300::placeholder--tw-placeholder-opacity: 1; color: rgba(60, 203, 197, var(--tw-placeholder-opacity));
Aa
placeholder-teal-400::placeholder--tw-placeholder-opacity: 1; color: rgba(42, 161, 164, var(--tw-placeholder-opacity));
Aa
placeholder-teal-500::placeholder--tw-placeholder-opacity: 1; color: rgba(20, 127, 135, var(--tw-placeholder-opacity));
Aa
placeholder-teal-600::placeholder--tw-placeholder-opacity: 1; color: rgba(3, 104, 115, var(--tw-placeholder-opacity));
Aa
placeholder-teal-700::placeholder--tw-placeholder-opacity: 1; color: rgba(3, 65, 79, var(--tw-placeholder-opacity));
Aa
placeholder-teal-800::placeholder--tw-placeholder-opacity: 1; color: rgba(1, 44, 52, var(--tw-placeholder-opacity));
Aa
placeholder-teal-900::placeholder--tw-placeholder-opacity: 1; color: rgba(0, 24, 30, var(--tw-placeholder-opacity));
Aa
placeholder-teal::placeholder--tw-placeholder-opacity: 1; color: rgba(60, 203, 197, var(--tw-placeholder-opacity));
Aa
placeholder-green-0::placeholder--tw-placeholder-opacity: 1; color: rgba(235, 255, 231, var(--tw-placeholder-opacity));
Aa
placeholder-green-100::placeholder--tw-placeholder-opacity: 1; color: rgba(207, 248, 199, var(--tw-placeholder-opacity));
Aa
placeholder-green-200::placeholder--tw-placeholder-opacity: 1; color: rgba(145, 234, 153, var(--tw-placeholder-opacity));
Aa
placeholder-green-300::placeholder--tw-placeholder-opacity: 1; color: rgba(64, 208, 102, var(--tw-placeholder-opacity));
Aa
placeholder-green-400::placeholder--tw-placeholder-opacity: 1; color: rgba(50, 168, 89, var(--tw-placeholder-opacity));
Aa
placeholder-green-500::placeholder--tw-placeholder-opacity: 1; color: rgba(20, 133, 64, var(--tw-placeholder-opacity));
Aa
placeholder-green-600::placeholder--tw-placeholder-opacity: 1; color: rgba(1, 110, 58, var(--tw-placeholder-opacity));
Aa
placeholder-green-700::placeholder--tw-placeholder-opacity: 1; color: rgba(6, 72, 38, var(--tw-placeholder-opacity));
Aa
placeholder-green-800::placeholder--tw-placeholder-opacity: 1; color: rgba(1, 44, 23, var(--tw-placeholder-opacity));
Aa
placeholder-green-900::placeholder--tw-placeholder-opacity: 1; color: rgba(0, 26, 13, var(--tw-placeholder-opacity));
Aa
placeholder-green::placeholder--tw-placeholder-opacity: 1; color: rgba(64, 208, 102, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-0::placeholder--tw-placeholder-opacity: 1; color: rgba(255, 250, 236, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-100::placeholder--tw-placeholder-opacity: 1; color: rgba(249, 241, 201, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-200::placeholder--tw-placeholder-opacity: 1; color: rgba(237, 231, 142, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-300::placeholder--tw-placeholder-opacity: 1; color: rgba(212, 205, 82, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-400::placeholder--tw-placeholder-opacity: 1; color: rgba(176, 170, 49, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-500::placeholder--tw-placeholder-opacity: 1; color: rgba(126, 127, 27, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-600::placeholder--tw-placeholder-opacity: 1; color: rgba(99, 100, 8, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-700::placeholder--tw-placeholder-opacity: 1; color: rgba(66, 64, 6, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-800::placeholder--tw-placeholder-opacity: 1; color: rgba(42, 38, 1, var(--tw-placeholder-opacity));
Aa
placeholder-yellow-900::placeholder--tw-placeholder-opacity: 1; color: rgba(25, 23, 0, var(--tw-placeholder-opacity));
Aa
placeholder-yellow::placeholder--tw-placeholder-opacity: 1; color: rgba(212, 205, 82, var(--tw-placeholder-opacity));
Aa
placeholder-orange-0::placeholder--tw-placeholder-opacity: 1; color: rgba(255, 245, 241, var(--tw-placeholder-opacity));
Aa
placeholder-orange-100::placeholder--tw-placeholder-opacity: 1; color: rgba(254, 219, 206, var(--tw-placeholder-opacity));
Aa
placeholder-orange-200::placeholder--tw-placeholder-opacity: 1; color: rgba(255, 196, 164, var(--tw-placeholder-opacity));
Aa
placeholder-orange-300::placeholder--tw-placeholder-opacity: 1; color: rgba(242, 153, 91, var(--tw-placeholder-opacity));
Aa
placeholder-orange-400::placeholder--tw-placeholder-opacity: 1; color: rgba(223, 122, 48, var(--tw-placeholder-opacity));
Aa
placeholder-orange-500::placeholder--tw-placeholder-opacity: 1; color: rgba(180, 95, 25, var(--tw-placeholder-opacity));
Aa
placeholder-orange-600::placeholder--tw-placeholder-opacity: 1; color: rgba(144, 72, 8, var(--tw-placeholder-opacity));
Aa
placeholder-orange-700::placeholder--tw-placeholder-opacity: 1; color: rgba(99, 50, 3, var(--tw-placeholder-opacity));
Aa
placeholder-orange-800::placeholder--tw-placeholder-opacity: 1; color: rgba(68, 33, 0, var(--tw-placeholder-opacity));
Aa
placeholder-orange-900::placeholder--tw-placeholder-opacity: 1; color: rgba(45, 17, 0, var(--tw-placeholder-opacity));
Aa
placeholder-orange::placeholder--tw-placeholder-opacity: 1; color: rgba(242, 153, 91, 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(253, 176, 177, var(--tw-placeholder-opacity));
Aa
placeholder-red-300::placeholder--tw-placeholder-opacity: 1; color: rgba(250, 115, 112, var(--tw-placeholder-opacity));
Aa
placeholder-red-400::placeholder--tw-placeholder-opacity: 1; color: rgba(224, 69, 66, var(--tw-placeholder-opacity));
Aa
placeholder-red-500::placeholder--tw-placeholder-opacity: 1; color: rgba(192, 44, 33, var(--tw-placeholder-opacity));
Aa
placeholder-red-600::placeholder--tw-placeholder-opacity: 1; color: rgba(164, 28, 30, var(--tw-placeholder-opacity));
Aa
placeholder-red-700::placeholder--tw-placeholder-opacity: 1; color: rgba(123, 10, 12, var(--tw-placeholder-opacity));
Aa
placeholder-red-800::placeholder--tw-placeholder-opacity: 1; color: rgba(87, 3, 5, var(--tw-placeholder-opacity));
Aa
placeholder-red-900::placeholder--tw-placeholder-opacity: 1; color: rgba(58, 1, 2, var(--tw-placeholder-opacity));
Aa
placeholder-red::placeholder--tw-placeholder-opacity: 1; color: rgba(250, 115, 112, var(--tw-placeholder-opacity));
Aa
placeholder-pink-0::placeholder--tw-placeholder-opacity: 1; color: rgba(255, 243, 255, var(--tw-placeholder-opacity));
Aa
placeholder-pink-100::placeholder--tw-placeholder-opacity: 1; color: rgba(254, 221, 250, var(--tw-placeholder-opacity));
Aa
placeholder-pink-200::placeholder--tw-placeholder-opacity: 1; color: rgba(253, 177, 231, var(--tw-placeholder-opacity));
Aa
placeholder-pink-300::placeholder--tw-placeholder-opacity: 1; color: rgba(243, 115, 192, var(--tw-placeholder-opacity));
Aa
placeholder-pink-400::placeholder--tw-placeholder-opacity: 1; color: rgba(229, 67, 153, var(--tw-placeholder-opacity));
Aa
placeholder-pink-500::placeholder--tw-placeholder-opacity: 1; color: rgba(190, 39, 109, var(--tw-placeholder-opacity));
Aa
placeholder-pink-600::placeholder--tw-placeholder-opacity: 1; color: rgba(165, 23, 80, var(--tw-placeholder-opacity));
Aa
placeholder-pink-700::placeholder--tw-placeholder-opacity: 1; color: rgba(116, 8, 48, var(--tw-placeholder-opacity));
Aa
placeholder-pink-800::placeholder--tw-placeholder-opacity: 1; color: rgba(85, 2, 32, var(--tw-placeholder-opacity));
Aa
placeholder-pink-900::placeholder--tw-placeholder-opacity: 1; color: rgba(61, 1, 21, var(--tw-placeholder-opacity));
Aa
placeholder-pink::placeholder--tw-placeholder-opacity: 1; color: rgba(243, 115, 192, var(--tw-placeholder-opacity));
Aa
placeholder-light::placeholder--tw-placeholder-opacity: 1; color: rgba(248, 248, 250, var(--tw-placeholder-opacity));
Aa
placeholder-dark::placeholder--tw-placeholder-opacity: 1; color: rgba(53, 52, 60, 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(149, 83, 248, 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(68, 0, 135, var(--tw-placeholder-opacity));
Aa
placeholder-secondary-dark::placeholder--tw-placeholder-opacity: 1; color: rgba(52, 0, 96, var(--tw-placeholder-opacity));
Aa
placeholder-info::placeholder--tw-placeholder-opacity: 1; color: rgba(118, 170, 239, var(--tw-placeholder-opacity));
Aa
placeholder-info-light::placeholder--tw-placeholder-opacity: 1; color: rgba(163, 211, 251, var(--tw-placeholder-opacity));
Aa
placeholder-info-dark::placeholder--tw-placeholder-opacity: 1; color: rgba(75, 122, 217, var(--tw-placeholder-opacity));
Aa
placeholder-success::placeholder--tw-placeholder-opacity: 1; color: rgba(64, 208, 102, var(--tw-placeholder-opacity));
Aa
placeholder-success-light::placeholder--tw-placeholder-opacity: 1; color: rgba(145, 234, 153, var(--tw-placeholder-opacity));
Aa
placeholder-success-dark::placeholder--tw-placeholder-opacity: 1; color: rgba(50, 168, 89, var(--tw-placeholder-opacity));
Aa
placeholder-warning::placeholder--tw-placeholder-opacity: 1; color: rgba(212, 205, 82, var(--tw-placeholder-opacity));
Aa
placeholder-warning-light::placeholder--tw-placeholder-opacity: 1; color: rgba(237, 231, 142, var(--tw-placeholder-opacity));
Aa
placeholder-warning-dark::placeholder--tw-placeholder-opacity: 1; color: rgba(176, 170, 49, var(--tw-placeholder-opacity));
Aa
placeholder-danger::placeholder--tw-placeholder-opacity: 1; color: rgba(250, 115, 112, var(--tw-placeholder-opacity));
Aa
placeholder-danger-light::placeholder--tw-placeholder-opacity: 1; color: rgba(253, 176, 177, var(--tw-placeholder-opacity));
Aa
placeholder-danger-dark::placeholder--tw-placeholder-opacity: 1; color: rgba(224, 69, 66, 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(53, 52, 60, 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 ...">