Tailwindcss: Suggestion - Update rounded-full from 9999px to 50%

Created on 23 Jun 2020 · 3Comments · Source: tailwindlabs/tailwindcss

Hi,

Currently .rounded-full, .rounded-t-full, .rounded-b-full, .rounded-r-full and .rounded-l-full, has 9999px to force a circle on the borders.

Can't we just set this to 50% instead?

It might avoid future problems on high res / massive screens and it would be a better approach:

Eg.
.rounded-full {
border-radius: 50%
}

Cheers

Source

FabioZanchi

Most helpful comment

Take a look at this pen: https://codepen.io/estevanmaito/pen/oNbWLvw?editors=1100

First input is using rounded-full. The second is using border-radius: 50%;

estevanmaito on 23 Jun 2020

👍2

All 3 comments

Take a look at this pen: https://codepen.io/estevanmaito/pen/oNbWLvw?editors=1100

First input is using rounded-full. The second is using border-radius: 50%;

estevanmaito on 23 Jun 2020

👍2

Got it. I was thinking about a specific use to create circle shapes. It's a valid point.
It's easy to have a .rounded-full to apply on these cases but I still think we should have this in two different classes for two different uses:

.rounded-full for inputs, buttons or something that's not a circle a specific class with 50% applied to create circles, doesn't matter the size of the screen.

FabioZanchi on 23 Jun 2020

@FabioZanchi Agree 9999px might not be the safest value if you think of current screen resolutions but CSS pixels are actually a different unit than the ones on your screens.

As such, it generally suffices to say that when the unit px is used, the goal is to try to have the distance 96px equal about 1 inch on the screen, regardless of the actual pixel density of the screen. In other words, if the user is on a phone with a pixel density of 266 DPI, and an element is placed on the screen with a width of 96px, the actual width of the element would be 266 device pixels.

You can read more on the spec document or the MDN page.

If for some reason you still feel this could cause any issues on your projects, I'd recommend extending theme to add the following borderRadius: { full: '9999vmax' } or something similar. The results would be the same but you'd be using a diff CSS unit that would match the biggest size of the viewport (used 9999 for consistency with the framework's magic numbers and because maybe someone need to draw a circle bigger than the screen, don't know).