Typography

Placeholder Color

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

Class

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

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

Variant	Enabled	Responsive
Default	Yes
Dark Theme	Yes
hover
group-hover
focus	Yes
focus-within
active
visited
checked
disabled