How are the spacing numbers calculated?

[lloydjatkinson]

Hi,

How are these values calculated? Specifically these ones:

I'm writing an app that will help our designers and developers stay in sync and this often involves discussing available design tokens and the names and their values. Figuring out the exact formula for this would be great, so I'm not hard coding lists of numbers...

Is this the correct formula? https://stackoverflow.com/questions/11352783/how-to-calculate-rem-for-type

[adamwathan]

Hey! Not totally sure what you're asking that isn't explained in that screenshot but I'll say it again in case it's helpful.

Browsers have a default root font size of 16px, so by default (that is unless you override the font size on the html element, or have configured a different font size in your browser preferences) 1rem is equal to 16px, since 1rem is whatever the root font size is.

In Tailwind's spacing scale, 1 is equal to .25rem, which is 4px in browsers by default. So mt-1 is a top margin of .25rem, which is 4px by default.

2 is equal to .25rem * 2 which is .5rem, which is 8px.
3 is equal to .25rem * 3 which is .75rem, which is 12px.
4 is equal to .25rem * 4 which is 1rem, which is 16px.
...
48 is equal to .25rem * 48 which is 12rem, which is 192px.
64 is equal to .25rem * 64 which is 16rem, which is 256px.

Hope that helps.