Padding (all sides)

p-0

0px

p-px

1px

p-0.5

0.125rem

p-1

0.25rem

p-1.5

0.375rem

p-2

0.5rem

p-2.5

0.625rem

p-3

0.75rem

p-3.5

0.875rem

p-4

1rem

p-5

1.25rem

p-6

1.5rem

p-7

1.75rem

p-8

2rem

p-10

2.5rem

p-12

3rem

p-16

4rem

p-20

5rem

p-24

6rem

p-32

8rem

p-40

10rem

p-48

12rem

p-64

16rem

p-80

20rem

p-96

24rem

Padding X (horizontal)

px-0
0px
px-px
1px
px-0.5
0.125rem
px-1
0.25rem
px-1.5
0.375rem
px-2
0.5rem
px-2.5
0.625rem
px-3
0.75rem
px-3.5
0.875rem
px-4
1rem
px-5
1.25rem
px-6
1.5rem
px-7
1.75rem
px-8
2rem
px-10
2.5rem
px-12
3rem
px-16
4rem
px-20
5rem
px-24
6rem
px-32
8rem
px-40
10rem
px-48
12rem
px-64
16rem
px-80
20rem
px-96
24rem

Padding Y (vertical)

py-0

0px

py-px

1px

py-0.5

0.125rem

py-1

0.25rem

py-1.5

0.375rem

py-2

0.5rem

py-2.5

0.625rem

py-3

0.75rem

py-3.5

0.875rem

py-4

1rem

py-5

1.25rem

py-6

1.5rem

py-7

1.75rem

py-8

2rem

py-10

2.5rem

py-12

3rem

py-16

4rem

py-20

5rem

py-24

6rem

py-32

8rem

py-40

10rem

py-48

12rem

py-64

16rem

py-80

20rem

py-96

24rem

Individual Sides (pt, pr, pb, pl)

Top

pt-0
pt-px
pt-0.5
pt-1
pt-1.5
pt-2
pt-2.5
pt-3
pt-3.5
pt-4
pt-5
pt-6
pt-7
pt-8
pt-10

Right

pr-0
pr-px
pr-0.5
pr-1
pr-1.5
pr-2
pr-2.5
pr-3
pr-3.5
pr-4
pr-5
pr-6
pr-7
pr-8
pr-10

Bottom

pb-0
pb-px
pb-0.5
pb-1
pb-1.5
pb-2
pb-2.5
pb-3
pb-3.5
pb-4
pb-5
pb-6
pb-7
pb-8
pb-10

Left

pl-0
pl-px
pl-0.5
pl-1
pl-1.5
pl-2
pl-2.5
pl-3
pl-3.5
pl-4
pl-5
pl-6
pl-7
pl-8
pl-10

Quick Reference

PrimeVue base font-size: 14px (1rem = 14px). "Actual" column shows computed pixels in our app.

ClassValueDefault (16px) Actual (14px)
p-00px0px0px
p-px1px1px1px
p-0.50.125rem2px1.75px
p-10.25rem4px3.5px
p-1.50.375rem6px5.25px
p-20.5rem8px7px
p-2.50.625rem10px8.75px
p-30.75rem12px10.5px
p-3.50.875rem14px12.25px
p-41rem16px14px
p-51.25rem20px17.5px
p-61.5rem24px21px
p-71.75rem28px24.5px
p-82rem32px28px
p-102.5rem40px35px
p-123rem48px42px
p-164rem64px56px
p-205rem80px70px
p-246rem96px84px
p-328rem128px112px
p-4010rem160px140px
p-4812rem192px168px
p-6416rem256px224px
p-8020rem320px280px
p-9624rem384px336px

Text Sizes

Shown with both Inter (body) and Lora (heading) fonts. Actual pixels based on 14px base.

ClassValueActualInter (body)Lora (heading)
text-xs0.75rem10.5pxThe quick brown foxThe quick brown fox
text-sm0.875rem12.25pxThe quick brown foxThe quick brown fox
text-base1rem14pxThe quick brown foxThe quick brown fox
text-lg1.125rem15.75pxThe quick brown foxThe quick brown fox
text-xl1.25rem17.5pxThe quick brown foxThe quick brown fox
text-2xl1.5rem21pxThe quick brown foxThe quick brown fox
text-3xl1.875rem26.25pxThe quick brown foxThe quick brown fox
text-4xl2.25rem31.5pxThe quick brown foxThe quick brown fox
text-5xl3rem42pxThe quick brown foxThe quick brown fox
text-6xl3.75rem52.5pxThe quick brown foxThe quick brown fox

Text Sizes. Visual Scale

text-xs10.5px
text-sm12.25px
text-base14px
text-lg15.75px
text-xl17.5px
text-2xl21px
text-3xl26.25px
text-4xl31.5px
text-5xl42px
text-6xl52.5px

Width Classes

Fixed widths, percentage widths, and max-width classes.

Fixed Widths

ClassValueActualPreview
w-10.25rem3.5px
w-20.5rem7px
w-41rem14px
w-82rem28px
w-123rem42px
w-164rem56px
w-246rem84px
w-328rem112px
w-4812rem168px
w-6416rem224px
w-8020rem280px
w-9624rem336px

Percentage Widths

w-1/4
25%
w-1/3
33.33%
w-1/2
50%
w-2/3
66.67%
w-3/4
75%
w-full
100%

Max Width

ClassValue
max-w-xs320px
max-w-sm384px
max-w-md448px
max-w-lg512px
max-w-xl576px
max-w-2xl672px
max-w-3xl768px
max-w-4xl896px
max-w-5xl1024px
max-w-6xl1152px
max-w-7xl1280px

Height Classes

Fixed heights and special height values. Actual pixels based on 14px base.

Fixed Heights

ClassValueActualPreview
h-41rem14px
h-82rem28px
h-123rem42px
h-164rem56px
h-246rem84px
h-328rem112px
h-4812rem168px
h-5213rem182px
h-6416rem224px
h-8020rem280px
h-9624rem336px

Special Heights

ClassValue
h-autoauto
h-full100%
h-screen100vh
h-svh100svh
h-minmin-content
h-maxmax-content
h-fitfit-content
h-1/250%
h-1/333.33%
h-2/366.67%

Line Height

ClassValue% / ActualPreview
leading-none1100%

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-tight1.25125%

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-snug1.375137.5%

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-normal1.5150%

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-relaxed1.625162.5%

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-loose2200%

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-41rem14px

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-61.5rem21px

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-82rem28px

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-102.5rem35px

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Common Combinations

text-sm leading-tightSmall tight. captions, labels

The quick brown fox jumps over the lazy dog.

text-base leading-normalBase normal. body text

The quick brown fox jumps over the lazy dog.

text-base leading-relaxedBase relaxed. readable paragraphs

The quick brown fox jumps over the lazy dog.

text-lg leading-relaxedLarge relaxed. descriptions

The quick brown fox jumps over the lazy dog.

text-2xl leading-tight font-lora2XL tight Lora. section headers

The quick brown fox jumps over the lazy dog.

text-3xl leading-tight font-lora3XL tight Lora. page titles

The quick brown fox jumps over the lazy dog.