Typography
Placeholder Color
Utilities for sets the placeholder color using the ::placeholder pseudo element.
Class
class | css | |
---|---|---|
placeholder-transparent | color: transparent | |
placeholder-white | color: #fff | |
placeholder-black-100 | color: #b9b9b9 | |
placeholder-black-200 | color: #a2a2a2 | |
placeholder-black-300 | color: #8b8b8b | |
placeholder-black-400 | color: #737373 | |
placeholder-black-500 | color: #5c5c5c | |
placeholder-black-600 | color: #454545 | |
placeholder-black-700 | color: #2e2e2e | |
placeholder-black-800 | color: #171717 | |
placeholder-black-900 | color: #000000 | |
placeholder-charcoal-100 | color: #222c35 | |
placeholder-charcoal-200 | color: #1f2831 | |
placeholder-charcoal-300 | color: #1c252c | |
placeholder-charcoal-400 | color: #192127 | |
placeholder-charcoal-500 | color: #161d22 | |
placeholder-charcoal-600 | color: #13181d | |
placeholder-charcoal-700 | color: #101419 | |
placeholder-charcoal-800 | color: #0d1014 | |
placeholder-charcoal-900 | color: #0a0c0f | |
placeholder-gray-100 | color: #f7fafc | |
placeholder-gray-200 | color: #edf2f7 | |
placeholder-gray-300 | color: #e2e8f0 | |
placeholder-gray-400 | color: #cbd5e0 | |
placeholder-gray-500 | color: #a0aec0 | |
placeholder-gray-600 | color: #718096 | |
placeholder-gray-700 | color: #4a5568 | |
placeholder-gray-800 | color: #2d3748 | |
placeholder-gray-900 | color: #1a202c | |
placeholder-red-100 | color: #fff5f5 | |
placeholder-red-200 | color: #fed7d7 | |
placeholder-red-300 | color: #feb2b2 | |
placeholder-red-400 | color: #fc8181 | |
placeholder-red-500 | color: #f56565 | |
placeholder-red-600 | color: #e53e3e | |
placeholder-red-700 | color: #c53030 | |
placeholder-red-800 | color: #9b2c2c | |
placeholder-red-900 | color: #742a2a | |
placeholder-orange-100 | color: #fffaf0 | |
placeholder-orange-200 | color: #feebc8 | |
placeholder-orange-300 | color: #fbd38d | |
placeholder-orange-400 | color: #f6ad55 | |
placeholder-orange-500 | color: #ed8936 | |
placeholder-orange-600 | color: #dd6b20 | |
placeholder-orange-700 | color: #c05621 | |
placeholder-orange-800 | color: #9c4221 | |
placeholder-orange-900 | color: #7b341e | |
placeholder-green-100 | color: #f0fff4 | |
placeholder-green-200 | color: #c6f6d5 | |
placeholder-green-300 | color: #9ae6b4 | |
placeholder-green-400 | color: #68d391 | |
placeholder-green-500 | color: #48bb78 | |
placeholder-green-600 | color: #38a169 | |
placeholder-green-700 | color: #2f855a | |
placeholder-green-800 | color: #276749 | |
placeholder-green-900 | color: #22543d | |
placeholder-teal-100 | color: #e6fffa | |
placeholder-teal-200 | color: #b2f5ea | |
placeholder-teal-300 | color: #81e6d9 | |
placeholder-teal-400 | color: #4fd1c5 | |
placeholder-teal-500 | color: #38b2ac | |
placeholder-teal-600 | color: #319795 | |
placeholder-teal-700 | color: #2c7a7b | |
placeholder-teal-800 | color: #285e61 | |
placeholder-teal-900 | color: #234e52 | |
placeholder-blue-100 | color: #ebf8ff | |
placeholder-blue-200 | color: #bee3f8 | |
placeholder-blue-300 | color: #90cdf4 | |
placeholder-blue-400 | color: #63b3ed | |
placeholder-blue-500 | color: #4299e1 | |
placeholder-blue-600 | color: #3182ce | |
placeholder-blue-700 | color: #2b6cb0 | |
placeholder-blue-800 | color: #2c5282 | |
placeholder-blue-900 | color: #2a4365 | |
placeholder-indigo-100 | color: #ebf4ff | |
placeholder-indigo-200 | color: #c3dafe | |
placeholder-indigo-300 | color: #a3bffa | |
placeholder-indigo-400 | color: #7f9cf5 | |
placeholder-indigo-500 | color: #667eea | |
placeholder-indigo-600 | color: #5a67d8 | |
placeholder-indigo-700 | color: #4c51bf | |
placeholder-indigo-800 | color: #434190 | |
placeholder-indigo-900 | color: #3c366b | |
placeholder-purple-100 | color: #faf5ff | |
placeholder-purple-200 | color: #e9d8fd | |
placeholder-purple-300 | color: #d6bcfa | |
placeholder-purple-400 | color: #b794f4 | |
placeholder-purple-500 | color: #9f7aea | |
placeholder-purple-600 | color: #805ad5 | |
placeholder-purple-700 | color: #6b46c1 | |
placeholder-purple-800 | color: #553c9a | |
placeholder-purple-900 | color: #44337a | |
placeholder-pink-100 | color: #fff5f7 | |
placeholder-pink-200 | color: #fed7e2 | |
placeholder-pink-300 | color: #fbb6ce | |
placeholder-pink-400 | color: #f687b3 | |
placeholder-pink-500 | color: #ed64a6 | |
placeholder-pink-600 | color: #d53f8c | |
placeholder-pink-700 | color: #b83280 | |
placeholder-pink-800 | color: #97266d | |
placeholder-pink-900 | color: #702459 | |
placeholder-khaki-100 | color: #f9f7f4 | |
placeholder-khaki-200 | color: #f0ebe4 | |
placeholder-khaki-300 | color: #e7dfd3 | |
placeholder-khaki-400 | color: #d5c8b2 | |
placeholder-khaki-500 | color: #c3b091 | |
placeholder-khaki-600 | color: #b09e83 | |
placeholder-khaki-700 | color: #756a57 | |
placeholder-khaki-800 | color: #584f41 | |
placeholder-khaki-900 | color: #3b352c | |
placeholder-amber-100 | color: #fff9e6 | |
placeholder-amber-200 | color: #fff0bf | |
placeholder-amber-300 | color: #ffe799 | |
placeholder-amber-400 | color: #ffd54d | |
placeholder-amber-500 | color: #ffc300 | |
placeholder-amber-600 | color: #e6b000 | |
placeholder-amber-700 | color: #997500 | |
placeholder-amber-800 | color: #735800 | |
placeholder-amber-900 | color: #4d3b00 | |
placeholder-nero-100 | color: #e9e9e9 | |
placeholder-nero-200 | color: #c7c8c9 | |
placeholder-nero-300 | color: #a6a7a8 | |
placeholder-nero-400 | color: #636466 | |
placeholder-nero-500 | color: #202225 | |
placeholder-nero-600 | color: #1d1f21 | |
placeholder-nero-700 | color: #131416 | |
placeholder-nero-800 | color: #0e0f11 | |
placeholder-nero-900 | color: #0a0a0b |
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
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | Yes | |
hover | ||
group-hover | ||
focus | Yes | |
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |