Tailwind CSS Placeholder Cheatsheet
Complete reference for all Tailwind v4 placeholder styling utilities.
Click each card to copy the class name. See the placeholder color in the input field.
Quick Navigation
Special Values
Special placeholder color values for inheriting, matching text color, or hiding the placeholder.
Basic Colors
Black and white placeholder colors for simple styling needs.
Color Palette
Placeholder colors from Tailwind's default color palette. Includes common gray shades and vibrant colors.
Placeholder Opacity
Control the opacity of placeholder text. Combine with color classes for fine-grained control.
Common Use Cases
Subtle Placeholder
<input type="text" class="placeholder-gray-400" placeholder="Enter your name" />
Brand-Colored Placeholder
<input
type="email"
class="placeholder-blue-500
border border-blue-300
focus:border-blue-500 rounded px-3 py-2"
placeholder="you@example.com"
/>Dark Mode Placeholder
<input
type="text"
class="placeholder-gray-400
dark:placeholder-gray-500
bg-white dark:bg-slate-800
text-gray-900 dark:text-white"
placeholder="Search..."
/>Reduced Opacity Placeholder
<input
type="text"
class="placeholder-gray-900
placeholder-opacity-50
border border-gray-300 rounded"
placeholder="Very subtle..."
/>Error State Placeholder
<input
type="email"
class="placeholder-red-400
border-red-500 bg-red-50
rounded px-3 py-2"
placeholder="Invalid email address"
/>Textarea Placeholder
<textarea
class="placeholder-purple-400
w-full h-32 border border-gray-300
rounded-lg p-3
focus:border-purple-500"
placeholder="Write your message..."
></textarea>Arbitrary Placeholder Colors
You can use any custom color with Tailwind's arbitrary value syntax:
<input class="placeholder-[#ff6b6b]" placeholder="Custom hex" />
<input class="placeholder-[rgb(255,107,107)]" placeholder="Custom RGB" />
<input class="placeholder-[hsl(0,100%,71%)]" placeholder="Custom HSL" />Arbitrary values let you use any valid CSS color format including hex, rgb, hsl, and CSS color names.
Frequently Asked Questions
How do I change placeholder color in Tailwind CSS?
Use the placeholder-{color} utility classes. For example, placeholder-gray-500 makes the placeholder text gray, while placeholder-red-500 makes it red. You can use any color from Tailwind's color palette including all shades (50-950).
How do I change placeholder opacity in Tailwind CSS?
Use the placeholder-opacity-{value} utility classes. For example, placeholder-opacity-50 makes the placeholder 50% transparent. Available values include 0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, and 100.
Can I use custom placeholder colors in Tailwind?
Yes! Use arbitrary values with the placeholder utility: placeholder-[#ff6b6b] or placeholder-[rgb(255,107,107)]. This lets you use any custom color for your placeholders.
What is the difference between placeholder-transparent and placeholder-opacity-0?
Both make the placeholder invisible, but placeholder-transparent sets the color to transparent directly, while placeholder-opacity-0 sets the opacity to 0. For hiding placeholders, either approach works, but placeholder-transparent is more direct.
Do placeholder utilities work on textareas?
Yes! Placeholder utilities work on all form elements that support the placeholder attribute, including input fields and textareas. Simply add the same classes to your textarea element.
How do I style placeholders differently in dark mode?
Use the dark: variant prefix with placeholder utilities. For example, placeholder-gray-400 dark:placeholder-gray-500 will use gray-400 in light mode and gray-500 in dark mode.
Quick Reference Table
| Class | Description | Use For |
|---|---|---|
placeholder-inherit | Inherit parent's color | Match surrounding text |
placeholder-current | Use currentColor | Match element's text color |
placeholder-transparent | Transparent placeholder | Hide placeholder text |
placeholder-gray-400 | Light gray color | Default subtle placeholder |
placeholder-gray-500 | Medium gray color | Standard placeholder |
placeholder-blue-500 | Blue color | Brand-colored inputs |
placeholder-red-500 | Red color | Error state placeholders |
placeholder-opacity-50 | 50% opacity | Subtle, semi-transparent |
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow