Styling rounded img component with Tailwind?

[deadcoder0904]

I want to style loading indicator on an image but unable to do so.

import React from "react";
import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";

const App = () => {
  return (
    <div className="flex items-center mt-20 flex-col">
      <h1 className="text-3xl">React Loading Skeleton</h1>
      <main className="">
        <Skeleton containerClassName="inline-block m-2 border-2 rounded-full h-9 w-9 bg-white" />
        <img
          className="inline-block m-2 border-2 rounded-full h-9 w-9"
          src={
            "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
          }
          alt={`Profile of Kristen Ramos`}
        />
      </main>
    </div>
  );
};

export default App;

It looks like this:

I want it to be loading over the entire image. How do I do so?

Reproduction → https://codesandbox.io/s/react-loading-skeleton-with-rounded-image-qyrbf?file=/src/App.tsx

[srmagura]

Hey @deadcoder0904, I think I have achieved the effect you are going for: https://codesandbox.io/s/react-loading-skeleton-with-rounded-image-forked-s5mq0?file=/src/App.tsx

Changes:

1. Make Skeleton have height=100% to fill the entire circle.
2. Set overflow: hidden on the skeleton container to prevent the skeleton from going outside the circle.
3. Set line-height: 1 on the skeleton container so there is no blank space at the top of the circle.

Let me know if you have other questions.

[deadcoder0904]

Thanks, that worked 🎉

Pure Tailwind

<Skeleton
  containerClassName="inline-block m-2 border-2 rounded-full h-9 w-9 bg-primary-light overflow-hidden leading-none"
  className="h-full"
/>