Andrew Lundy

In Tailwind, if you wanted to produce a `padding` of `1rem`, you’d use the following class name: `p-4`. I’ve found that I need a quick way to calculate the value used in the place of “4” when trying to produce a greater amount of `padding` (or any other property that uses `rem`).

In Tailwind, 4 is equal to `1rem`. Since 4 is always equal to `1rem`, you just need to multiply 4 by the amount of `rem` that you want. For example, if you wanted to add a `padding` of `5rem` to each side of an element, you’d use `p-20` because `4 * 5 = 20`.

The formula:
`4 * Amount of rem wanted = Value needed to use in place of ‘4’ in the Tailwind class name`

--

--

Andrew Lundy

Andrew Lundy

Software Engineer | Writing about programming, full-stack development, and lessons learned throughout my career.

Following