Day 3 - Image Styling

Learn how to style images with Tailwind's utility classes.

1. Responsive Images

Use w-full h-auto to make an image scale with its parent container — the Tailwind equivalent of Bootstrap's .img-fluid.

Example

class="w-full h-auto"

Control how an image fills its container with object-{fit}. Always pair with fixed dimensions.

object-cover

Crops to fill. Aspect ratio kept.

object-contain

Fits inside. May show gaps.

object-fill

Stretches to fill. May distort.

Float Left (float-left)

Text wraps around the image because the image is floated to the left.

Float Right (float-right)

Text wraps around the image because the image is floated to the right.

Centered (block mx-auto)

class="block mx-auto"

rounded

rounded-xl

rounded-full (circle)

rounded-full (pill)

Use relative on the container and absolute inset-0 on the overlay:

Dark Overlay

Gradient Overlay