Tailwind Spacing Class Helper

About this tool

Convert a pixel value into the matching Tailwind CSS spacing scale (e.g. 16px → 4), and see the rem equivalent. Tailwind's scale is 0.25rem (4px) per step.

Example

Input: 16px

Output: Tailwind scale: 4 (p-4, m-4), 1rem

Privacy

This tool runs entirely in your browser. Your data is processed locally and never uploaded to a server.

How to use this tool

1. Enter a pixel value in the input box, such as 16px or 24.
2. Check the matching Tailwind spacing class shown by the tool.
3. Use the rem value to confirm how Tailwind will size it in CSS.
4. Copy the result into your class name or design notes.

Step by step, what happens

1. The tool reads the pixel value you provide and treats it as a spacing size.
2. It compares that value against Tailwind's spacing scale, where each step equals 4px or 0.25rem.
3. It finds the closest matching Tailwind class value and shows the scale number.
4. It also displays the rem equivalent so you can see the CSS size in a more reusable unit.

Worked example

Suppose you want to turn a 16px spacing token into the Tailwind class you should use.

Input: 16px

1. You enter 16px into the generator.
2. The tool matches it to Tailwind's spacing step for 16px and converts it to rem.
3. It shows the class value and the equivalent rem size.

Tips and common mistakes

• Tailwind spacing is based on 4px steps, so values like 4px, 8px, 12px, and 16px map cleanly.
• If you enter a value that is not an exact multiple of 4px, the tool can help you see the closest scale step, but you should double-check whether that is the spacing you want.
• Use the rem result when you are comparing design tokens or working in CSS that favors relative units.
• Remember that this tool is for spacing scale values, so it helps with padding, margin, gap, and similar classes, not every Tailwind utility.

Frequently asked questions