Typography

Placeholder Color

Utilities for sets the placeholder color using the ::placeholder pseudo element.


Class

classcss
placeholder-transparentcolor: transparentText
placeholder-whitecolor: #fffText
placeholder-black-100color: #b9b9b9Text
placeholder-black-200color: #a2a2a2Text
placeholder-black-300color: #8b8b8bText
placeholder-black-400color: #737373Text
placeholder-black-500color: #5c5c5cText
placeholder-black-600color: #454545Text
placeholder-black-700color: #2e2e2eText
placeholder-black-800color: #171717Text
placeholder-black-900color: #000000Text
placeholder-charcoal-100color: #222c35Text
placeholder-charcoal-200color: #1f2831Text
placeholder-charcoal-300color: #1c252cText
placeholder-charcoal-400color: #192127Text
placeholder-charcoal-500color: #161d22Text
placeholder-charcoal-600color: #13181dText
placeholder-charcoal-700color: #101419Text
placeholder-charcoal-800color: #0d1014Text
placeholder-charcoal-900color: #0a0c0fText
placeholder-gray-100color: #f7fafcText
placeholder-gray-200color: #edf2f7Text
placeholder-gray-300color: #e2e8f0Text
placeholder-gray-400color: #cbd5e0Text
placeholder-gray-500color: #a0aec0Text
placeholder-gray-600color: #718096Text
placeholder-gray-700color: #4a5568Text
placeholder-gray-800color: #2d3748Text
placeholder-gray-900color: #1a202cText
placeholder-red-100color: #fff5f5Text
placeholder-red-200color: #fed7d7Text
placeholder-red-300color: #feb2b2Text
placeholder-red-400color: #fc8181Text
placeholder-red-500color: #f56565Text
placeholder-red-600color: #e53e3eText
placeholder-red-700color: #c53030Text
placeholder-red-800color: #9b2c2cText
placeholder-red-900color: #742a2aText
placeholder-orange-100color: #fffaf0Text
placeholder-orange-200color: #feebc8Text
placeholder-orange-300color: #fbd38dText
placeholder-orange-400color: #f6ad55Text
placeholder-orange-500color: #ed8936Text
placeholder-orange-600color: #dd6b20Text
placeholder-orange-700color: #c05621Text
placeholder-orange-800color: #9c4221Text
placeholder-orange-900color: #7b341eText
placeholder-green-100color: #f0fff4Text
placeholder-green-200color: #c6f6d5Text
placeholder-green-300color: #9ae6b4Text
placeholder-green-400color: #68d391Text
placeholder-green-500color: #48bb78Text
placeholder-green-600color: #38a169Text
placeholder-green-700color: #2f855aText
placeholder-green-800color: #276749Text
placeholder-green-900color: #22543dText
placeholder-teal-100color: #e6fffaText
placeholder-teal-200color: #b2f5eaText
placeholder-teal-300color: #81e6d9Text
placeholder-teal-400color: #4fd1c5Text
placeholder-teal-500color: #38b2acText
placeholder-teal-600color: #319795Text
placeholder-teal-700color: #2c7a7bText
placeholder-teal-800color: #285e61Text
placeholder-teal-900color: #234e52Text
placeholder-blue-100color: #ebf8ffText
placeholder-blue-200color: #bee3f8Text
placeholder-blue-300color: #90cdf4Text
placeholder-blue-400color: #63b3edText
placeholder-blue-500color: #4299e1Text
placeholder-blue-600color: #3182ceText
placeholder-blue-700color: #2b6cb0Text
placeholder-blue-800color: #2c5282Text
placeholder-blue-900color: #2a4365Text
placeholder-indigo-100color: #ebf4ffText
placeholder-indigo-200color: #c3dafeText
placeholder-indigo-300color: #a3bffaText
placeholder-indigo-400color: #7f9cf5Text
placeholder-indigo-500color: #667eeaText
placeholder-indigo-600color: #5a67d8Text
placeholder-indigo-700color: #4c51bfText
placeholder-indigo-800color: #434190Text
placeholder-indigo-900color: #3c366bText
placeholder-purple-100color: #faf5ffText
placeholder-purple-200color: #e9d8fdText
placeholder-purple-300color: #d6bcfaText
placeholder-purple-400color: #b794f4Text
placeholder-purple-500color: #9f7aeaText
placeholder-purple-600color: #805ad5Text
placeholder-purple-700color: #6b46c1Text
placeholder-purple-800color: #553c9aText
placeholder-purple-900color: #44337aText
placeholder-pink-100color: #fff5f7Text
placeholder-pink-200color: #fed7e2Text
placeholder-pink-300color: #fbb6ceText
placeholder-pink-400color: #f687b3Text
placeholder-pink-500color: #ed64a6Text
placeholder-pink-600color: #d53f8cText
placeholder-pink-700color: #b83280Text
placeholder-pink-800color: #97266dText
placeholder-pink-900color: #702459Text
placeholder-khaki-100color: #f9f7f4Text
placeholder-khaki-200color: #f0ebe4Text
placeholder-khaki-300color: #e7dfd3Text
placeholder-khaki-400color: #d5c8b2Text
placeholder-khaki-500color: #c3b091Text
placeholder-khaki-600color: #b09e83Text
placeholder-khaki-700color: #756a57Text
placeholder-khaki-800color: #584f41Text
placeholder-khaki-900color: #3b352cText
placeholder-amber-100color: #fff9e6Text
placeholder-amber-200color: #fff0bfText
placeholder-amber-300color: #ffe799Text
placeholder-amber-400color: #ffd54dText
placeholder-amber-500color: #ffc300Text
placeholder-amber-600color: #e6b000Text
placeholder-amber-700color: #997500Text
placeholder-amber-800color: #735800Text
placeholder-amber-900color: #4d3b00Text
placeholder-nero-100color: #e9e9e9Text
placeholder-nero-200color: #c7c8c9Text
placeholder-nero-300color: #a6a7a8Text
placeholder-nero-400color: #636466Text
placeholder-nero-500color: #202225Text
placeholder-nero-600color: #1d1f21Text
placeholder-nero-700color: #131416Text
placeholder-nero-800color: #0e0f11Text
placeholder-nero-900color: #0a0a0bText
Note: Utility customizing is unavailable.

Usage

<!-- Example -->
<input class="placeholder-red-500 ..."
placeholder="...">

v1.1.0 Set auto dark theme enabled to an element with added (dark) prefix.

<!-- Example -->
<input class="placeholder-red-500 ... (dark)placeholder-gray-200"
placeholder="...">

Variant

VariantEnabledResponsive
DefaultYes
Dark ThemeYes
hover
group-hover
focusYes
focus-within
active
visited
checked
disabled