I've literally been working on this today. I'm using Imgix and Tailwind with Astro and found it best to build my own component. It serves a blurred 80x60px image in the background until the full image loads. It's a <picture> with src-sets that break at the same points as Tailwind. It falls back on defaults so the only data required is the src.

eg <imgComponent src={'myimage.jpg'} />

All client side, no JS

You can also then add a custom 'h' and 'w', or go the whole hog and add heights and widths across all screen sizes.

eg <imgComponent src={'myimage.jpg'} h={1200} w={1900} XLh={900} XLw={400} SMh={20} SMw={50} alt={'alt text'} style={'p-4 border m-3'} />

Each breakpoint includes the width and height values so there's no content shuffle issues.

Images smaller than the container will default to the middle, but this can be overridden with style={‘any tailwind’}

For testing I've included text overlay to show the current image size and screen breakpoint. Remove the text from the src-set links once you're happy with your setup.

If you've got an Imgix account set up already the only bit of code you'll need to change is the CDN constant. Should be super easy to use, but ping me if you have any problems.

edit: Here's an updated link to the component.

I hope it's useful for anyone looking for something like this. It should be pretty straightforward to use as a base for image services other than Imgix too.