February 10, 2025 • 5 min read
Placeholder Images with Tailwind CSS
Tailwind CSS and placeholder images work well together: use utility classes for aspect ratio, object fit, and responsive sizing while the placeholder URL provides the image source. This guide shows common patterns for cards, skeletons, and backgrounds.
Aspect Ratio and object-cover
Use Tailwind's aspect-video (16:9) or aspect-square so the layout reserves space before the image loads. Combine with object-cover so the image fills the box without distortion:
<!-- 16:9 card image -->
<img
src="https://placeholderimage.co/800x400"
class="w-full aspect-video object-cover rounded-lg"
alt="placeholder"
/>
<!-- Square avatar -->
<img
src="https://placeholderimage.co/100x100/1c1c2e/a3a3a3"
class="w-12 h-12 aspect-square object-cover rounded-full"
alt="avatar"
/>Responsive Card with Placeholder
A typical card layout with a placeholder image and text:
<div class="rounded-lg overflow-hidden border border-gray-200 dark:border-white/10">
<img
src="https://placeholderimage.co/600x400/EEEEEE/31343C"
class="w-full aspect-video object-cover"
alt="card"
/>
<div class="p-4">
<h3 class="font-semibold text-lg">Card Title</h3>
<p class="text-gray-500 text-sm">Description text.</p>
</div>
</div>Skeleton Shimmer Animation
While the image is loading, show a skeleton with a shimmer effect. Replace with the image (or a placeholder fallback) when loaded:
<div class="rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-800">
<!-- Skeleton with shimmer -->
<div
class="aspect-video animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 bg-[length:200%_100%] animate-shimmer"
style="animation: shimmer 1.5s infinite"
/>
</div>
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}Background Image with Tailwind
Use a placeholder as a CSS background with Tailwind's bg-cover and bg-center. You need an arbitrary style for the URL or a custom utility:
<div
class="h-64 bg-cover bg-center rounded-xl"
style="background-image: url('https://placeholderimage.co/1200x400/1c1c1e/22c55e')"
>
<!-- overlay content -->
</div>Grid of Placeholder Cards
A responsive grid of cards, each with a placeholder image:
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{[1,2,3].map((i) => (
<div key={i} class="rounded-lg border border-gray-200 dark:border-white/10 overflow-hidden">
<img
src={`https://placeholderimage.co/400x300/EEEEEE/31343C?text=Card+${i}`}
class="w-full aspect-video object-cover"
alt={`card ${i}`}
/>
<div class="p-3">
<div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-2" />
<div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/2" />
</div>
</div>
))}
</div>FAQ
How do I use a placeholder image with Tailwind CSS?
Use the placeholder URL in an img src and style with Tailwind classes like w-full, h-48, object-cover, rounded-lg. For backgrounds use bg-cover bg-center with style or arbitrary values for background-image URL.
What Tailwind aspect ratio should I use for placeholder images?
Use aspect-video (16:9) for banners and cards, aspect-square for avatars and products, and aspect-[3/2] for blog thumbnails. Combine with object-cover so the image fills the box.
How do I make a skeleton loader with Tailwind?
Use animate-pulse on a div with a neutral background (e.g. bg-gray-200 dark:bg-gray-800). For shimmer, use a gradient background with animate background-position. Replace with the real image (or placeholder fallback) when loaded.
Can I use a placeholder image as a Tailwind background?
Yes. Use arbitrary properties: class="bg-cover bg-center bg-no-repeat" and style="background-image: url('https://placeholderimage.co/1200x400.svg')" or define a custom background image in your Tailwind config.
What placeholder size works best for Tailwind cards?
Use 600x400 or 800x400 for horizontal cards with aspect-video. For square product cards use 400x400. Match the aspect ratio to your design so the placeholder doesn't distort when replaced with real images.