CODEWITHSUNDEEP
cssgeometrytailwind-cssradial-gradients
moses kamau
moses kamau

Reputation: 123

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

Upvotes: 3

Views: 11534

Answers (2)

bizlin
bizlin

Reputation: 121

A background gradient won't actually have any effect on the size or shape of an element.

In order to maintain a perfect circle you first need to make an element a square and then use something like border radius to round the corners.

The most recent version of Tailwind CSS has a class to utilize the "aspect-ratio" property.

(More on that here: https://tailwindcss.com/docs/aspect-ratio )

Your HTML might look something like this:

<div class="avatar aspect-square rounded-full"></div>

"aspect-square" will make the element always be a square. "rounded-full" will use border-radius to make the square a circle.

Both of these classes are available in Tailwind CSS.

If you haven't already, your icon avatars may need a defined height or width to make sure they match each other in size.

Upvotes: 4

Gabe
Gabe

Reputation: 2666

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.

Upvotes: 11

Related Questions