PickCodeTailwind sizes are in rem, and with the default 16px root font size 1rem equals 16px. Each spacing step is 0.25rem (4px), so p-4 is 1rem or 16px. To convert a pixel value, divide by 16 for rem, or by 4 for the spacing step: 24px is 1.5rem, which is p-6.
Common conversions
| px | rem | Spacing class | Text class |
|---|---|---|---|
| 4 | 0.25 | p-1 | |
| 8 | 0.5 | p-2 | |
| 12 | 0.75 | p-3 | text-xs |
| 14 | 0.875 | p-3.5 | text-sm |
| 16 | 1 | p-4 | text-base |
| 18 | 1.125 | p-4.5 (v4) | text-lg |
| 20 | 1.25 | p-5 | text-xl |
| 24 | 1.5 | p-6 | text-2xl |
| 32 | 2 | p-8 |
Why rem and not px
rem follows the user's browser font size setting. Someone who raises their default text size gets bigger text and spacing together, and the layout keeps its proportions. With px, text and spacing stay fixed.
The catch: if a site sets html { font-size: 62.5% }, 1rem becomes 10px there. Copy rem values from such a site into a default project and everything grows by 60%.
Working in px anyway
In Tailwind v4 the whole spacing scale comes from one variable. You can change the base unit, or use an arbitrary value for a single case:
@theme {
--spacing: 4px;
}
<div class="p-[18px] text-[15px]">...</div>PickCode maps copied pixel values to the default scale when they match, so 16px of padding becomes p-4. Off-scale values come out as px arbitrary values, and clamp(), vw and % are kept as written.
Full walkthrough: Extract design tokens
Questions
What is p-4 in pixels?
16px at the default root font size: 4 steps of 0.25rem is 1rem.
Can I make Tailwind use px?
Set --spacing: 4px in @theme in v4, or use arbitrary values. Keeping rem is better for users who change their font size.
Why is my rem value bigger than on the original site?
The original site probably changed the root font size. Check the computed font size of the html element.