cssgeometrytailwind-cssradial-gradients

Use Tailwind Css to maintain a perfect Circle a cross every screen size

I want to use Tailwind Css to maintain a perfect circle for my icon avatars shown below for both large and small screens.

I do know that I can use a gradient-radial like this:


.avatar{
  background: radial-gradient(circle closest-side, 
      yellow calc(100% - 2px),#db0100 calc(100% - 1px) 99%,transparent 100%);
  color: #db0100;
}

But I scrictly want to use Tailwind. Is it possible? Thanks.

The circles are not symetrical in small screens

Solution

  • You can do that rather easy with Tailwind. You need to create a div with rounded-full, grow-0 and shrink-0. Besides this, you need to set a width and height. The setting the grow and shrink to 0 means that the div will not resize, even if the browser needs more space for other elements.

    <div class="w-11 h-11 shrink-0 grow-0 rounded-full bg-green-300 text-green-700">Content</div>

    I have made an example for you in Tailwind Play.

    Hope this helps.