Meaning of the spacing class in Tailwind(e..g p-4 means 1rem (16px), m-2 means 0.5rem (8px), etc.)
Here is the list of common sizes:
Spacing prefixes and their values
| Prefix ( p- / m- ) | Value |
|---|---|
p-0 | 0px |
p-1 | 0.25rem (4px) |
p-2 | 0.5rem (8px) |
p-3 | 0.75rem (12px) |
p-4 | 1rem (16px) |
p-5 | 1.25rem (20px) |
p-6 | 1.5rem (24px) |
p-8 | 2rem (32px) |
p-10 | 2.5rem (40px) |
p-12 | 3rem (48px) |
p-16 | 4rem (64px) |
p-20 | 5rem (80px) |
p-24 | 6rem (96px) |
p-32 | 8rem (128px) |
p-40 | 10rem (160px) |
p-48 | 12rem (192px) |
p-56 | 14rem (224px) |
p-64 | 16rem (256px) |
References:
Tailwind uses screen size prefixes to apply styles at specific breakpoints:
Screen size prefixes and breakpoints
| Prefix | Device | Value |
|---|---|---|
w-sm | Small devices | 640px and up |
w-md | Medium devices | 768px and up |
w-lg | Large devices | 1024px and up |
w-xl | Extra-large devices | 1280px and up |
w-2xl | Double extra-large devices | 1536px and up |
Screen size prefixes and breakpoints
| Prefix | Device | Value |
|---|---|---|
w-3xs | 16rem (256px) | |
w-2xs | 18rem (288px) | |
w-xs | 20rem (320px) | |
w-sm | 24rem (384px) | |
w-md | 28rem (448px) | |
w-lg | 32rem (512px) | |
w-xl | 36rem (576px) | |
w-2xl | 42rem (672px) | |
w-3xl | 48rem (768px) | |
w-4xl | 56rem (896px) | |
w-5xl | 64rem (1024px) | |
w-6xl | 72rem (1152px) | |
w-7xl | 80rem (1280px) |
Width size prefixes and their values
| Prefix | Value |
|---|---|
w-24 | 6rem; /* 96px */ |
w-32 | 8rem; /* 128px */ |
w-40 | 10rem; /* 160px */ |
w-48 | 12rem; /* 192px */ |
w-64 | 16rem; /* 256px */ |
w-80 | 20rem; /* 320px */ |
w-96 | 24rem; /* 384px */ |
Suppose you want a container to have different padding on mobile and desktop devices.
<div class="p-4 md:p-8" />
p-4 padding(16px).768px and up), apply p-8 padding(32px).