How to Convert Pixels to Tailwind Spacing

Raise your hand if you’ve ever stared at a Figma mockup, seen a margin of 24px, and immediately frozen while typing your Tailwind classes.

Is it m-4? m-6? m-8?

If you’re transitioning from plain CSS to Tailwind CSS, the spacing scale can feel like learning a completely new language. In standard CSS, you just slap margin-top: 24px; onto an element and call it a day. In Tailwind, you have to translate that pixel value into a utility class.

But here’s the good news: once you understand the underlying logic, it becomes second nature. No calculator required. Let’s break down how to convert pixels to Tailwind spacing effortlessly.

The Golden Rule: The “Power of 4”

If you only take one thing away from this article, let it be this: Tailwind’s default spacing scale is based on multiples of 4 pixels.

Think of it like exchanging a dollar bill for quarters. Just like you need four quarters to make a dollar, you need four pixels to make one single Tailwind “unit.”

So, 1 in Tailwind language equals 4px.

Here is the simple formula: Take your pixel value and divide it by 4.

Got a 16px padding? Divide 16 by 4. You get 4. Your class is p-4.
Need a 32px margin? Divide 32 by 4. You get 8. Your class is m-8.
Looking for an 8px gap? Divide 8 by 4. You get 2. Your class is gap-2.

It’s really that simple. Once you memorize the “divide by 4” rule, you’ll be flying through your layouts without breaking a sweat.

But Wait… What About the Half-Steps?

Sometimes, dividing by 4 doesn’t give you a perfectly round number. What if your designer asks for 10px of padding? 10 divided by 4 is 2.5.

Tailwind actually accounts for these smaller nudges! For the tiny spaces (usually anything under 16px), Tailwind offers half-steps.

0.5 = 2px
1.5 = 6px
2.5 = 10px
3.5 = 14px

So for that 10px padding, you’d just use p-2.5.

Think of these half-steps like adding a dime to your pile of quarters. They give you just a little bit of extra precision when you’re working on tight UI components like buttons or badges.

What If My Number Doesn’t Fit the Scale at All?

We’ve all been there. You get a design that demands exactly 17px of margin-top. Not 16, not 20. Exactly 17.

When you encounter an oddball number that breaks the “Power of 4” rule, you have two choices:

1. The Arbitrary Value Escape Hatch Tailwind introduced a brilliant feature called arbitrary values. You can literally just shove your exact pixel value into square brackets, and Tailwind will generate the class on the fly. Just type: mt-[17px] Boom. Done. No configuration needed. It’s perfect for those one-off weird numbers that you’ll only use once.

2. Update Your Config (For Repeat Offenders) If your design system uses 17px everywhere (maybe it’s a specific brand spacing guideline), don’t write [17px] fifty times. Open up your tailwind.config.js file and add it to your theme extension.

module.exports = {
  theme: {
    extend: {
      spacing: {
        '17': '17px',
      }
    }
  }
}

Now you can just use m-17 or p-17 like any other native Tailwind class.

Wrapping Up

Switching to Tailwind’s spacing scale feels a bit like switching from an automatic transmission to a manual one. It takes a little extra thought at first, but eventually, muscle memory kicks in. Just remember the Power of 4, use the square brackets when you’re in a pinch, and you’ll be building pixel-perfect layouts in no time.

Your Quick-Reference Cheat Sheet

Bookmark this table, take a screenshot, or just keep it open in a tab for those moments when your brain refuses to do basic division.

(Pro tip: If you want to skip the mental math entirely, you can always just plug your numbers into a Pixel to Tailwind Converter to get the exact class instantly!)

The Math (px ÷ 4)	Tailwind Spacing	Pixels
4 ÷ 4 = 1	`1`	4px
8 ÷ 4 = 2	2	8px
12 ÷ 4 = 3	3	12px
16 ÷ 4 = 4 (The design standard!)	4	16px
20 ÷ 4 = 5	5	20px
24 ÷ 4 = 6	6	24px
32 ÷ 4 = 8	8	32px
40 ÷ 4 = 10	10	40px
48 ÷ 4 = 12	12	48px
64 ÷ 4 = 16	16	64px