How to Use the Tailwind CSS Spacing & Dimension Reference Calculator
-
1
Enter a pixel value, rem value, or Tailwind numeric scale (e.g. 4, 12, 16).
-
2
View corresponding Tailwind utility classes (p-*, m-*, gap-*, w-*, h-*).
-
3
See the live visual box demonstrating the exact dimension.
Practical Example & Use Case
Common Real-World Scenario
Finding that a 28px designer spec corresponds to Tailwind custom class or nearest default scale (7 = 1.75rem = 28px).
Technical Notes & Limitations
Browser Engine Architecture
Covers standard Tailwind CSS v3 and v4 default 4px/0.25rem spacing scale.
Frequently Asked Questions
What is Tailwind's base unit?
Tailwind uses 0.25rem (4px by default) per step: 1 = 0.25rem, 2 = 0.5rem, 4 = 1rem, 8 = 2rem.
How do I use arbitrary values in Tailwind?
You can use square bracket notation like p-[28px] or w-[340px] if an exact standard scale token is not available.