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

I want to use

CodePudding user response：

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 >Content</div>

I have made an example for you in Tailwind Play.

Hope this helps.

CodePudding user response：

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 ></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.