SOITZ TOOL

언어 변경

TailwindCSS Handbook

COLOR

SLATE

50
#f8fafc
100
#f1f5f9
200
#e2e8f0
300
#cbd5e1
400
#94a3b8
500
#64748b
600
#475569
700
#334155
800
#1e293b
900
#0f172a
950
#020617

GRAY

50
#f9fafb
100
#f3f4f6
200
#e5e7eb
300
#d1d5db
400
#9ca3af
500
#6b7280
600
#4b5563
700
#374151
800
#1f2937
900
#111827
950
#030712

ZINC

50
#fafafa
100
#f4f4f5
200
#e4e4e7
300
#d4d4d8
400
#a1a1aa
500
#71717a
600
#52525b
700
#3f3f46
800
#27272a
900
#18181b
950
#09090b

NEUTRAL

50
#fafafa
100
#f5f5f5
200
#e5e5e5
300
#d4d4d4
400
#a3a3a3
500
#737373
600
#525252
700
#404040
800
#262626
900
#171717
950
#0a0a0a

STONE

50
#fafaf9
100
#f5f5f4
200
#e7e5e4
300
#d6d3d1
400
#a8a29e
500
#78716c
600
#57534e
700
#44403c
800
#292524
900
#1c1917
950
#0c0a09

RED

50
#fef2f2
100
#fee2e2
200
#fecaca
300
#fca5a5
400
#f87171
500
#ef4444
600
#dc2626
700
#b91c1c
800
#991b1b
900
#7f1d1d
950
#450a0a

ORANGE

50
#fff7ed
100
#ffedd5
200
#fed7aa
300
#fdba74
400
#fb923c
500
#f97316
600
#ea580c
700
#c2410c
800
#9a3412
900
#7c2d12
950
#431407

AMBER

50
#fffbeb
100
#fef3c7
200
#fde68a
300
#fcd34d
400
#fbbf24
500
#f59e0b
600
#d97706
700
#b45309
800
#92400e
900
#78350f
950
#451a03

YELLOW

50
#fefce8
100
#fef9c3
200
#fef08a
300
#fde047
400
#facc15
500
#eab308
600
#ca8a04
700
#a16207
800
#854d0e
900
#713f12
950
#422006

LIME

50
#f7fee7
100
#ecfccb
200
#d9f99d
300
#bef264
400
#a3e635
500
#84cc16
600
#65a30d
700
#4d7c0f
800
#3f6212
900
#365314
950
#1a2e05

GREEN

50
#f0fdf4
100
#dcfce7
200
#bbf7d0
300
#86efac
400
#4ade80
500
#22c55e
600
#16a34a
700
#15803d
800
#166534
900
#14532d
950
#052e16

EMERALD

50
#ecfdf5
100
#d1fae5
200
#a7f3d0
300
#6ee7b7
400
#34d399
500
#10b981
600
#059669
700
#047857
800
#065f46
900
#064e3b
950
#022c22

TEAL

50
#f0fdfa
100
#ccfbf1
200
#99f6e4
300
#5eead4
400
#2dd4bf
500
#14b8a6
600
#0d9488
700
#0f766e
800
#115e59
900
#134e4a
950
#042f2e

CYAN

50
#ecfeff
100
#cffafe
200
#a5f3fc
300
#67e8f9
400
#22d3ee
500
#06b6d4
600
#0891b2
700
#0e7490
800
#155e75
900
#164e63
950
#083344

BLUE

50
#eff6ff
100
#dbeafe
200
#bfdbfe
300
#93c5fd
400
#60a5fa
500
#3b82f6
600
#2563eb
700
#1d4ed8
800
#1e40af
900
#1e3a8a
950
#172554

INDIGO

50
#eef2ff
100
#e0e7ff
200
#c7d2fe
300
#a5b4fc
400
#818cf8
500
#6366f1
600
#4f46e5
700
#4338ca
800
#3730a3
900
#312e81
950
#1e1b4b

VIOLET

50
#f5f3ff
100
#ede9fe
200
#ddd6fe
300
#c4b5fd
400
#a78bfa
500
#8b5cf6
600
#7c3aed
700
#6d28d9
800
#5b21b6
900
#4c1d95
950
#2e1065

PURPLE

50
#faf5ff
100
#f3e8ff
200
#e9d5ff
300
#d8b4fe
400
#c084fc
500
#a855f7
600
#9333ea
700
#7e22ce
800
#6b21a8
900
#581c87
950
#3b0764

FUCHSIA

50
#fdf4ff
100
#fae8ff
200
#f5d0fe
300
#f0abfc
400
#e879f9
500
#d946ef
600
#c026d3
700
#a21caf
800
#86198f
900
#701a75
950
#4a044e

PINK

50
#fdf2f8
100
#fce7f3
200
#fbcfe8
300
#f9a8d4
400
#f472b6
500
#ec4899
600
#db2777
700
#be185d
800
#9d174d
900
#831843
950
#500724

ROSE

50
#fff1f2
100
#ffe4e6
200
#fecdd3
300
#fda4af
400
#fb7185
500
#f43f5e
600
#e11d48
700
#be123c
800
#9f1239
900
#881337
950
#4c0519

CLASSNAME

Screen Size

sm
640px
md
768px
lg
1024px
xl
1280px
2xl
1536px

Font Size

text-xs
font-size: 0.75rem;/* 12px */
line-height: 1rem;/* 16px */
text-sm
font-size: 0.875rem;/* 14px */
line-height: 1.25rem;/* 20px */
text-base
font-size: 1rem;/* 16px */
line-height: 1.5rem;/* 24px */
text-lg
font-size: 1.125rem;/* 18px */
line-height: 1.75rem;/* 28px */
text-xl
font-size: 1.25rem;/* 20px */
line-height: 1.75rem;/* 28px */
text-2xl
font-size: 1.5rem;/* 24px */
line-height: 2rem;/* 32px */
text-3xl
font-size: 1.875rem;/* 30px */
line-height: 2.25rem;/* 36px */
text-4xl
font-size: 2.25rem;/* 36px */
line-height: 2.5rem;/* 40px */
text-5xl
font-size: 3rem;/* 48px */
line-height: 1;
text-6xl
font-size: 3.75rem;/* 60px */
line-height: 1;
text-7xl
font-size: 4.5rem;/* 72px */
line-height: 1;
text-8xl
font-size: 6rem;/* 96px */
line-height: 1;
text-9xl
font-size: 8rem;/* 128px */
line-height: 1;

Line Height

leading-3
line-height: .75rem;/* 12px */
leading-4
line-height: 1rem;/* 16px */
leading-5
line-height: 1.25rem;/* 20px */
leading-6
line-height: 1.5rem;/* 24px */
leading-7
line-height: 1.75rem;/* 28px */
leading-8
line-height: 2rem;/* 32px */
leading-9
line-height: 2.25rem;/* 36px */
leading-10
line-height: 2.5rem;/* 40px */
leading-none
line-height: 1;
leading-tight
line-height: 1.25;
leading-snug
line-height: 1.375;
leading-normal
line-height: 1.5;
leading-relaxed
line-height: 1.625;
leading-loose
line-height: 2;

Width

w-0
width: 0px;
w-px
width: 1px;
w-0.5
width: 0.125rem;/* 2px */
w-1
width: 0.25rem;/* 4px */
w-1.5
width: 0.375rem;/* 6px */
w-2
width: 0.5rem;/* 8px */
w-2.5
width: 0.625rem;/* 10px */
w-3
width: 0.75rem;/* 12px */
w-3.5
width: 0.875rem;/* 14px */
w-4
width: 1rem;/* 16px */
w-5
width: 1.25rem;/* 20px */
w-6
width: 1.5rem;/* 24px */
w-7
width: 1.75rem;/* 28px */
w-8
width: 2rem;/* 32px */
w-9
width: 2.25rem;/* 36px */
w-10
width: 2.5rem;/* 40px */
w-11
width: 2.75rem;/* 44px */
w-12
width: 3rem;/* 48px */
w-14
width: 3.5rem;/* 56px */
w-16
width: 4rem;/* 64px */
w-20
width: 5rem;/* 80px */
w-24
width: 6rem;/* 96px */
w-28
width: 7rem;/* 112px */
w-32
width: 8rem;/* 128px */
w-36
width: 9rem;/* 144px */
w-40
width: 10rem;/* 160px */
w-44
width: 11rem;/* 176px */
w-48
width: 12rem;/* 192px */
w-52
width: 13rem;/* 208px */
w-56
width: 14rem;/* 224px */
w-60
width: 15rem;/* 240px */
w-64
width: 16rem;/* 256px */
w-72
width: 18rem;/* 288px */
w-80
width: 20rem;/* 320px */
w-96
width: 24rem;/* 384px */
w-auto
width: auto;
w-1/2
width: 50%;
w-1/3
width: 33.333333%;
w-2/3
width: 66.666667%;
w-1/4
width: 25%;
w-2/4
width: 50%;
w-3/4
width: 75%;
w-1/5
width: 20%;
w-2/5
width: 40%;
w-3/5
width: 60%;
w-4/5
width: 80%;
w-1/6
width: 16.666667%;
w-2/6
width: 33.333333%;
w-3/6
width: 50%;
w-4/6
width: 66.666667%;
w-5/6
width: 83.333333%;
w-1/12
width: 8.333333%;
w-2/12
width: 16.666667%;
w-3/12
width: 25%;
w-4/12
width: 33.333333%;
w-5/12
width: 41.666667%;
w-6/12
width: 50%;
w-7/12
width: 58.333333%;
w-8/12
width: 66.666667%;
w-9/12
width: 75%;
w-10/12
width: 83.333333%;
w-11/12
width: 91.666667%;
w-full
width: 100%;
w-screen
width: 100vw;
w-svw
width: 100svw;
w-lvw
width: 100lvw;
w-dvw
width: 100dvw;
w-min
width: min-content;
w-max
width: max-content;
w-fit
width: fit-content;

Height

h-0
height: 0px;
h-px
height: 1px;
h-0.5
height: 0.125rem;/* 2px */
h-1
height: 0.25rem;/* 4px */
h-1.5
height: 0.375rem;/* 6px */
h-2
height: 0.5rem;/* 8px */
h-2.5
height: 0.625rem;/* 10px */
h-3
height: 0.75rem;/* 12px */
h-3.5
height: 0.875rem;/* 14px */
h-4
height: 1rem;/* 16px */
h-5
height: 1.25rem;/* 20px */
h-6
height: 1.5rem;/* 24px */
h-7
height: 1.75rem;/* 28px */
h-8
height: 2rem;/* 32px */
h-9
height: 2.25rem;/* 36px */
h-10
height: 2.5rem;/* 40px */
h-11
height: 2.75rem;/* 44px */
h-12
height: 3rem;/* 48px */
h-14
height: 3.5rem;/* 56px */
h-16
height: 4rem;/* 64px */
h-20
height: 5rem;/* 80px */
h-24
height: 6rem;/* 96px */
h-28
height: 7rem;/* 112px */
h-32
height: 8rem;/* 128px */
h-36
height: 9rem;/* 144px */
h-40
height: 10rem;/* 160px */
h-44
height: 11rem;/* 176px */
h-48
height: 12rem;/* 192px */
h-52
height: 13rem;/* 208px */
h-56
height: 14rem;/* 224px */
h-60
height: 15rem;/* 240px */
h-64
height: 16rem;/* 256px */
h-72
height: 18rem;/* 288px */
h-80
height: 20rem;/* 320px */
h-96
height: 24rem;/* 384px */
h-auto
height: auto;
h-1/2
height: 50%;
h-1/3
height: 33.333333%;
h-2/3
height: 66.666667%;
h-1/4
height: 25%;
h-2/4
height: 50%;
h-3/4
height: 75%;
h-1/5
height: 20%;
h-2/5
height: 40%;
h-3/5
height: 60%;
h-4/5
height: 80%;
h-1/6
height: 16.666667%;
h-2/6
height: 33.333333%;
h-3/6
height: 50%;
h-4/6
height: 66.666667%;
h-5/6
height: 83.333333%;
h-full
height: 100%;
h-screen
height: 100vh;
h-svh
height: 100svh;
h-lvh
height: 100lvh;
h-dvh
height: 100dvh;
h-min
height: min-content;
h-max
height: max-content;
h-fit
height: fit-content;

Padding

p-0
padding: 0px;
px-0
padding-left: 0px; padding-right: 0px;
py-0
padding-top: 0px; padding-bottom: 0px;
ps-0
padding-inline-start: 0px;
pe-0
padding-inline-end: 0px;
pt-0
padding-top: 0px;
pr-0
padding-right: 0px;
pb-0
padding-bottom: 0px;
pl-0
padding-left: 0px;
p-px
padding: 1px;
px-px
padding-left: 1px; padding-right: 1px;
py-px
padding-top: 1px; padding-bottom: 1px;
ps-px
padding-inline-start: 1px;
pe-px
padding-inline-end: 1px;
pt-px
padding-top: 1px;
pr-px
padding-right: 1px;
pb-px
padding-bottom: 1px;
pl-px
padding-left: 1px;
p-0.5
padding: 0.125rem;/* 2px */
px-0.5
padding-left: 0.125rem;/* 2px */
padding-right: 0.125rem;/* 2px */
py-0.5
padding-top: 0.125rem;/* 2px */
padding-bottom: 0.125rem;/* 2px */
ps-0.5
padding-inline-start: 0.125rem;/* 2px */
pe-0.5
padding-inline-end: 0.125rem;/* 2px */
pt-0.5
padding-top: 0.125rem;/* 2px */
pr-0.5
padding-right: 0.125rem;/* 2px */
pb-0.5
padding-bottom: 0.125rem;/* 2px */
pl-0.5
padding-left: 0.125rem;/* 2px */
p-1
padding: 0.25rem;/* 4px */
px-1
padding-left: 0.25rem;/* 4px */
padding-right: 0.25rem;/* 4px */
py-1
padding-top: 0.25rem;/* 4px */
padding-bottom: 0.25rem;/* 4px */
ps-1
padding-inline-start: 0.25rem;/* 4px */
pe-1
padding-inline-end: 0.25rem;/* 4px */
pt-1
padding-top: 0.25rem;/* 4px */
pr-1
padding-right: 0.25rem;/* 4px */
pb-1
padding-bottom: 0.25rem;/* 4px */
pl-1
padding-left: 0.25rem;/* 4px */
p-1.5
padding: 0.375rem;/* 6px */
px-1.5
padding-left: 0.375rem;/* 6px */
padding-right: 0.375rem;/* 6px */
py-1.5
padding-top: 0.375rem;/* 6px */
padding-bottom: 0.375rem;/* 6px */
ps-1.5
padding-inline-start: 0.375rem;/* 6px */
pe-1.5
padding-inline-end: 0.375rem;/* 6px */
pt-1.5
padding-top: 0.375rem;/* 6px */
pr-1.5
padding-right: 0.375rem;/* 6px */
pb-1.5
padding-bottom: 0.375rem;/* 6px */
pl-1.5
padding-left: 0.375rem;/* 6px */
p-2
padding: 0.5rem;/* 8px */
px-2
padding-left: 0.5rem;/* 8px */
padding-right: 0.5rem;/* 8px */
py-2
padding-top: 0.5rem;/* 8px */
padding-bottom: 0.5rem;/* 8px */
ps-2
padding-inline-start: 0.5rem;/* 8px */
pe-2
padding-inline-end: 0.5rem;/* 8px */
pt-2
padding-top: 0.5rem;/* 8px */
pr-2
padding-right: 0.5rem;/* 8px */
pb-2
padding-bottom: 0.5rem;/* 8px */
pl-2
padding-left: 0.5rem;/* 8px */
p-2.5
padding: 0.625rem;/* 10px */
px-2.5
padding-left: 0.625rem;/* 10px */
padding-right: 0.625rem;/* 10px */
py-2.5
padding-top: 0.625rem;/* 10px */
padding-bottom: 0.625rem;/* 10px */
ps-2.5
padding-inline-start: 0.625rem;/* 10px */
pe-2.5
padding-inline-end: 0.625rem;/* 10px */
pt-2.5
padding-top: 0.625rem;/* 10px */
pr-2.5
padding-right: 0.625rem;/* 10px */
pb-2.5
padding-bottom: 0.625rem;/* 10px */
pl-2.5
padding-left: 0.625rem;/* 10px */
p-3
padding: 0.75rem;/* 12px */
px-3
padding-left: 0.75rem;/* 12px */
padding-right: 0.75rem;/* 12px */
py-3
padding-top: 0.75rem;/* 12px */
padding-bottom: 0.75rem;/* 12px */
ps-3
padding-inline-start: 0.75rem;/* 12px */
pe-3
padding-inline-end: 0.75rem;/* 12px */
pt-3
padding-top: 0.75rem;/* 12px */
pr-3
padding-right: 0.75rem;/* 12px */
pb-3
padding-bottom: 0.75rem;/* 12px */
pl-3
padding-left: 0.75rem;/* 12px */
p-3.5
padding: 0.875rem;/* 14px */
px-3.5
padding-left: 0.875rem;/* 14px */
padding-right: 0.875rem;/* 14px */
py-3.5
padding-top: 0.875rem;/* 14px */
padding-bottom: 0.875rem;/* 14px */
ps-3.5
padding-inline-start: 0.875rem;/* 14px */
pe-3.5
padding-inline-end: 0.875rem;/* 14px */
pt-3.5
padding-top: 0.875rem;/* 14px */
pr-3.5
padding-right: 0.875rem;/* 14px */
pb-3.5
padding-bottom: 0.875rem;/* 14px */
pl-3.5
padding-left: 0.875rem;/* 14px */
p-4
padding: 1rem;/* 16px */
px-4
padding-left: 1rem;/* 16px */
padding-right: 1rem;/* 16px */
py-4
padding-top: 1rem;/* 16px */
padding-bottom: 1rem;/* 16px */
ps-4
padding-inline-start: 1rem;/* 16px */
pe-4
padding-inline-end: 1rem;/* 16px */
pt-4
padding-top: 1rem;/* 16px */
pr-4
padding-right: 1rem;/* 16px */
pb-4
padding-bottom: 1rem;/* 16px */
pl-4
padding-left: 1rem;/* 16px */
p-5
padding: 1.25rem;/* 20px */
px-5
padding-left: 1.25rem;/* 20px */
padding-right: 1.25rem;/* 20px */
py-5
padding-top: 1.25rem;/* 20px */
padding-bottom: 1.25rem;/* 20px */
ps-5
padding-inline-start: 1.25rem;/* 20px */
pe-5
padding-inline-end: 1.25rem;/* 20px */
pt-5
padding-top: 1.25rem;/* 20px */
pr-5
padding-right: 1.25rem;/* 20px */
pb-5
padding-bottom: 1.25rem;/* 20px */
pl-5
padding-left: 1.25rem;/* 20px */
p-6
padding: 1.5rem;/* 24px */
px-6
padding-left: 1.5rem;/* 24px */
padding-right: 1.5rem;/* 24px */
py-6
padding-top: 1.5rem;/* 24px */
padding-bottom: 1.5rem;/* 24px */
ps-6
padding-inline-start: 1.5rem;/* 24px */
pe-6
padding-inline-end: 1.5rem;/* 24px */
pt-6
padding-top: 1.5rem;/* 24px */
pr-6
padding-right: 1.5rem;/* 24px */
pb-6
padding-bottom: 1.5rem;/* 24px */
pl-6
padding-left: 1.5rem;/* 24px */
p-7
padding: 1.75rem;/* 28px */
px-7
padding-left: 1.75rem;/* 28px */
padding-right: 1.75rem;/* 28px */
py-7
padding-top: 1.75rem;/* 28px */
padding-bottom: 1.75rem;/* 28px */
ps-7
padding-inline-start: 1.75rem;/* 28px */
pe-7
padding-inline-end: 1.75rem;/* 28px */
pt-7
padding-top: 1.75rem;/* 28px */
pr-7
padding-right: 1.75rem;/* 28px */
pb-7
padding-bottom: 1.75rem;/* 28px */
pl-7
padding-left: 1.75rem;/* 28px */
p-8
padding: 2rem;/* 32px */
px-8
padding-left: 2rem;/* 32px */
padding-right: 2rem;/* 32px */
py-8
padding-top: 2rem;/* 32px */
padding-bottom: 2rem;/* 32px */
ps-8
padding-inline-start: 2rem;/* 32px */
pe-8
padding-inline-end: 2rem;/* 32px */
pt-8
padding-top: 2rem;/* 32px */
pr-8
padding-right: 2rem;/* 32px */
pb-8
padding-bottom: 2rem;/* 32px */
pl-8
padding-left: 2rem;/* 32px */
p-9
padding: 2.25rem;/* 36px */
px-9
padding-left: 2.25rem;/* 36px */
padding-right: 2.25rem;/* 36px */
py-9
padding-top: 2.25rem;/* 36px */
padding-bottom: 2.25rem;/* 36px */
ps-9
padding-inline-start: 2.25rem;/* 36px */
pe-9
padding-inline-end: 2.25rem;/* 36px */
pt-9
padding-top: 2.25rem;/* 36px */
pr-9
padding-right: 2.25rem;/* 36px */
pb-9
padding-bottom: 2.25rem;/* 36px */
pl-9
padding-left: 2.25rem;/* 36px */
p-10
padding: 2.5rem;/* 40px */
px-10
padding-left: 2.5rem;/* 40px */
padding-right: 2.5rem;/* 40px */
py-10
padding-top: 2.5rem;/* 40px */
padding-bottom: 2.5rem;/* 40px */
ps-10
padding-inline-start: 2.5rem;/* 40px */
pe-10
padding-inline-end: 2.5rem;/* 40px */
pt-10
padding-top: 2.5rem;/* 40px */
pr-10
padding-right: 2.5rem;/* 40px */
pb-10
padding-bottom: 2.5rem;/* 40px */
pl-10
padding-left: 2.5rem;/* 40px */
p-11
padding: 2.75rem;/* 44px */
px-11
padding-left: 2.75rem;/* 44px */
padding-right: 2.75rem;/* 44px */
py-11
padding-top: 2.75rem;/* 44px */
padding-bottom: 2.75rem;/* 44px */
ps-11
padding-inline-start: 2.75rem;/* 44px */
pe-11
padding-inline-end: 2.75rem;/* 44px */
pt-11
padding-top: 2.75rem;/* 44px */
pr-11
padding-right: 2.75rem;/* 44px */
pb-11
padding-bottom: 2.75rem;/* 44px */
pl-11
padding-left: 2.75rem;/* 44px */
p-12
padding: 3rem;/* 48px */
px-12
padding-left: 3rem;/* 48px */
padding-right: 3rem;/* 48px */
py-12
padding-top: 3rem;/* 48px */
padding-bottom: 3rem;/* 48px */
ps-12
padding-inline-start: 3rem;/* 48px */
pe-12
padding-inline-end: 3rem;/* 48px */
pt-12
padding-top: 3rem;/* 48px */
pr-12
padding-right: 3rem;/* 48px */
pb-12
padding-bottom: 3rem;/* 48px */
pl-12
padding-left: 3rem;/* 48px */
p-14
padding: 3.5rem;/* 56px */
px-14
padding-left: 3.5rem;/* 56px */
padding-right: 3.5rem;/* 56px */
py-14
padding-top: 3.5rem;/* 56px */
padding-bottom: 3.5rem;/* 56px */
ps-14
padding-inline-start: 3.5rem;/* 56px */
pe-14
padding-inline-end: 3.5rem;/* 56px */
pt-14
padding-top: 3.5rem;/* 56px */
pr-14
padding-right: 3.5rem;/* 56px */
pb-14
padding-bottom: 3.5rem;/* 56px */
pl-14
padding-left: 3.5rem;/* 56px */
p-16
padding: 4rem;/* 64px */
px-16
padding-left: 4rem;/* 64px */
padding-right: 4rem;/* 64px */
py-16
padding-top: 4rem;/* 64px */
padding-bottom: 4rem;/* 64px */
ps-16
padding-inline-start: 4rem;/* 64px */
pe-16
padding-inline-end: 4rem;/* 64px */
pt-16
padding-top: 4rem;/* 64px */
pr-16
padding-right: 4rem;/* 64px */
pb-16
padding-bottom: 4rem;/* 64px */
pl-16
padding-left: 4rem;/* 64px */
p-20
padding: 5rem;/* 80px */
px-20
padding-left: 5rem;/* 80px */
padding-right: 5rem;/* 80px */
py-20
padding-top: 5rem;/* 80px */
padding-bottom: 5rem;/* 80px */
ps-20
padding-inline-start: 5rem;/* 80px */
pe-20
padding-inline-end: 5rem;/* 80px */
pt-20
padding-top: 5rem;/* 80px */
pr-20
padding-right: 5rem;/* 80px */
pb-20
padding-bottom: 5rem;/* 80px */
pl-20
padding-left: 5rem;/* 80px */
p-24
padding: 6rem;/* 96px */
px-24
padding-left: 6rem;/* 96px */
padding-right: 6rem;/* 96px */
py-24
padding-top: 6rem;/* 96px */
padding-bottom: 6rem;/* 96px */
ps-24
padding-inline-start: 6rem;/* 96px */
pe-24
padding-inline-end: 6rem;/* 96px */
pt-24
padding-top: 6rem;/* 96px */
pr-24
padding-right: 6rem;/* 96px */
pb-24
padding-bottom: 6rem;/* 96px */
pl-24
padding-left: 6rem;/* 96px */
p-28
padding: 7rem;/* 112px */
px-28
padding-left: 7rem;/* 112px */
padding-right: 7rem;/* 112px */
py-28
padding-top: 7rem;/* 112px */
padding-bottom: 7rem;/* 112px */
ps-28
padding-inline-start: 7rem;/* 112px */
pe-28
padding-inline-end: 7rem;/* 112px */
pt-28
padding-top: 7rem;/* 112px */
pr-28
padding-right: 7rem;/* 112px */
pb-28
padding-bottom: 7rem;/* 112px */
pl-28
padding-left: 7rem;/* 112px */
p-32
padding: 8rem;/* 128px */
px-32
padding-left: 8rem;/* 128px */
padding-right: 8rem;/* 128px */
py-32
padding-top: 8rem;/* 128px */
padding-bottom: 8rem;/* 128px */
ps-32
padding-inline-start: 8rem;/* 128px */
pe-32
padding-inline-end: 8rem;/* 128px */
pt-32
padding-top: 8rem;/* 128px */
pr-32
padding-right: 8rem;/* 128px */
pb-32
padding-bottom: 8rem;/* 128px */
pl-32
padding-left: 8rem;/* 128px */
p-36
padding: 9rem;/* 144px */
px-36
padding-left: 9rem;/* 144px */
padding-right: 9rem;/* 144px */
py-36
padding-top: 9rem;/* 144px */
padding-bottom: 9rem;/* 144px */
ps-36
padding-inline-start: 9rem;/* 144px */
pe-36
padding-inline-end: 9rem;/* 144px */
pt-36
padding-top: 9rem;/* 144px */
pr-36
padding-right: 9rem;/* 144px */
pb-36
padding-bottom: 9rem;/* 144px */
pl-36
padding-left: 9rem;/* 144px */
p-40
padding: 10rem;/* 160px */
px-40
padding-left: 10rem;/* 160px */
padding-right: 10rem;/* 160px */
py-40
padding-top: 10rem;/* 160px */
padding-bottom: 10rem;/* 160px */
ps-40
padding-inline-start: 10rem;/* 160px */
pe-40
padding-inline-end: 10rem;/* 160px */
pt-40
padding-top: 10rem;/* 160px */
pr-40
padding-right: 10rem;/* 160px */
pb-40
padding-bottom: 10rem;/* 160px */
pl-40
padding-left: 10rem;/* 160px */
p-44
padding: 11rem;/* 176px */
px-44
padding-left: 11rem;/* 176px */
padding-right: 11rem;/* 176px */
py-44
padding-top: 11rem;/* 176px */
padding-bottom: 11rem;/* 176px */
ps-44
padding-inline-start: 11rem;/* 176px */
pe-44
padding-inline-end: 11rem;/* 176px */
pt-44
padding-top: 11rem;/* 176px */
pr-44
padding-right: 11rem;/* 176px */
pb-44
padding-bottom: 11rem;/* 176px */
pl-44
padding-left: 11rem;/* 176px */
p-48
padding: 12rem;/* 192px */
px-48
padding-left: 12rem;/* 192px */
padding-right: 12rem;/* 192px */
py-48
padding-top: 12rem;/* 192px */
padding-bottom: 12rem;/* 192px */
ps-48
padding-inline-start: 12rem;/* 192px */
pe-48
padding-inline-end: 12rem;/* 192px */
pt-48
padding-top: 12rem;/* 192px */
pr-48
padding-right: 12rem;/* 192px */
pb-48
padding-bottom: 12rem;/* 192px */
pl-48
padding-left: 12rem;/* 192px */
p-52
padding: 13rem;/* 208px */
px-52
padding-left: 13rem;/* 208px */
padding-right: 13rem;/* 208px */
py-52
padding-top: 13rem;/* 208px */
padding-bottom: 13rem;/* 208px */
ps-52
padding-inline-start: 13rem;/* 208px */
pe-52
padding-inline-end: 13rem;/* 208px */
pt-52
padding-top: 13rem;/* 208px */
pr-52
padding-right: 13rem;/* 208px */
pb-52
padding-bottom: 13rem;/* 208px */
pl-52
padding-left: 13rem;/* 208px */
p-56
padding: 14rem;/* 224px */
px-56
padding-left: 14rem;/* 224px */
padding-right: 14rem;/* 224px */
py-56
padding-top: 14rem;/* 224px */
padding-bottom: 14rem;/* 224px */
ps-56
padding-inline-start: 14rem;/* 224px */
pe-56
padding-inline-end: 14rem;/* 224px */
pt-56
padding-top: 14rem;/* 224px */
pr-56
padding-right: 14rem;/* 224px */
pb-56
padding-bottom: 14rem;/* 224px */
pl-56
padding-left: 14rem;/* 224px */
p-60
padding: 15rem;/* 240px */
px-60
padding-left: 15rem;/* 240px */
padding-right: 15rem;/* 240px */
py-60
padding-top: 15rem;/* 240px */
padding-bottom: 15rem;/* 240px */
ps-60
padding-inline-start: 15rem;/* 240px */
pe-60
padding-inline-end: 15rem;/* 240px */
pt-60
padding-top: 15rem;/* 240px */
pr-60
padding-right: 15rem;/* 240px */
pb-60
padding-bottom: 15rem;/* 240px */
pl-60
padding-left: 15rem;/* 240px */
p-64
padding: 16rem;/* 256px */
px-64
padding-left: 16rem;/* 256px */
padding-right: 16rem;/* 256px */
py-64
padding-top: 16rem;/* 256px */
padding-bottom: 16rem;/* 256px */
ps-64
padding-inline-start: 16rem;/* 256px */
pe-64
padding-inline-end: 16rem;/* 256px */
pt-64
padding-top: 16rem;/* 256px */
pr-64
padding-right: 16rem;/* 256px */
pb-64
padding-bottom: 16rem;/* 256px */
pl-64
padding-left: 16rem;/* 256px */
p-72
padding: 18rem;/* 288px */
px-72
padding-left: 18rem;/* 288px */
padding-right: 18rem;/* 288px */
py-72
padding-top: 18rem;/* 288px */
padding-bottom: 18rem;/* 288px */
ps-72
padding-inline-start: 18rem;/* 288px */
pe-72
padding-inline-end: 18rem;/* 288px */
pt-72
padding-top: 18rem;/* 288px */
pr-72
padding-right: 18rem;/* 288px */
pb-72
padding-bottom: 18rem;/* 288px */
pl-72
padding-left: 18rem;/* 288px */
p-80
padding: 20rem;/* 320px */
px-80
padding-left: 20rem;/* 320px */
padding-right: 20rem;/* 320px */
py-80
padding-top: 20rem;/* 320px */
padding-bottom: 20rem;/* 320px */
ps-80
padding-inline-start: 20rem;/* 320px */
pe-80
padding-inline-end: 20rem;/* 320px */
pt-80
padding-top: 20rem;/* 320px */
pr-80
padding-right: 20rem;/* 320px */
pb-80
padding-bottom: 20rem;/* 320px */
pl-80
padding-left: 20rem;/* 320px */
p-96
padding: 24rem;/* 384px */
px-96
padding-left: 24rem;/* 384px */
padding-right: 24rem;/* 384px */
py-96
padding-top: 24rem;/* 384px */
padding-bottom: 24rem;/* 384px */
ps-96
padding-inline-start: 24rem;/* 384px */
pe-96
padding-inline-end: 24rem;/* 384px */
pt-96
padding-top: 24rem;/* 384px */
pr-96
padding-right: 24rem;/* 384px */
pb-96
padding-bottom: 24rem;/* 384px */
pl-96
padding-left: 24rem;/* 384px */

Border Width

border-0
border-width: 0px;
border-2
border-width: 2px;
border-4
border-width: 4px;
border-8
border-width: 8px;
border
border-width: 1px;
border-x-0
border-left-width: 0px; border-right-width: 0px;
border-x-2
border-left-width: 2px; border-right-width: 2px;
border-x-4
border-left-width: 4px; border-right-width: 4px;
border-x-8
border-left-width: 8px; border-right-width: 8px;
border-x
border-left-width: 1px; border-right-width: 1px;
border-y-0
border-top-width: 0px; border-bottom-width: 0px;
border-y-2
border-top-width: 2px; border-bottom-width: 2px;
border-y-4
border-top-width: 4px; border-bottom-width: 4px;
border-y-8
border-top-width: 8px; border-bottom-width: 8px;
border-y
border-top-width: 1px; border-bottom-width: 1px;
border-s-0
border-inline-start-width: 0px;
border-s-2
border-inline-start-width: 2px;
border-s-4
border-inline-start-width: 4px;
border-s-8
border-inline-start-width: 8px;
border-s
border-inline-start-width: 1px;
border-e-0
border-inline-end-width: 0px;
border-e-2
border-inline-end-width: 2px;
border-e-4
border-inline-end-width: 4px;
border-e-8
border-inline-end-width: 8px;
border-e
border-inline-end-width: 1px;
border-t-0
border-top-width: 0px;
border-t-2
border-top-width: 2px;
border-t-4
border-top-width: 4px;
border-t-8
border-top-width: 8px;
border-t
border-top-width: 1px;
border-r-0
border-right-width: 0px;
border-r-2
border-right-width: 2px;
border-r-4
border-right-width: 4px;
border-r-8
border-right-width: 8px;
border-r
border-right-width: 1px;
border-b-0
border-bottom-width: 0px;
border-b-2
border-bottom-width: 2px;
border-b-4
border-bottom-width: 4px;
border-b-8
border-bottom-width: 8px;
border-b
border-bottom-width: 1px;
border-l-0
border-left-width: 0px;
border-l-2
border-left-width: 2px;
border-l-4
border-left-width: 4px;
border-l-8
border-left-width: 8px;
border-l
border-left-width: 1px;

Border Radius

rounded-none
border-radius: 0px;
rounded-sm
border-radius: 0.125rem;/* 2px */
rounded
border-radius: 0.25rem;/* 4px */
rounded-md
border-radius: 0.375rem;/* 6px */
rounded-lg
border-radius: 0.5rem;/* 8px */
rounded-xl
border-radius: 0.75rem;/* 12px */
rounded-2xl
border-radius: 1rem;/* 16px */
rounded-3xl
border-radius: 1.5rem;/* 24px */
rounded-full
border-radius: 9999px;
rounded-s-none
border-start-start-radius: 0px; border-end-start-radius: 0px;
rounded-s-sm
border-start-start-radius: 0.125rem;/* 2px */
border-end-start-radius: 0.125rem;/* 2px */
rounded-s
border-start-start-radius: 0.25rem;/* 4px */
border-end-start-radius: 0.25rem;/* 4px */
rounded-s-md
border-start-start-radius: 0.375rem;/* 6px */
border-end-start-radius: 0.375rem;/* 6px */
rounded-s-lg
border-start-start-radius: 0.5rem;/* 8px */
border-end-start-radius: 0.5rem;/* 8px */
rounded-s-xl
border-start-start-radius: 0.75rem;/* 12px */
border-end-start-radius: 0.75rem;/* 12px */
rounded-s-2xl
border-start-start-radius: 1rem;/* 16px */
border-end-start-radius: 1rem;/* 16px */
rounded-s-3xl
border-start-start-radius: 1.5rem;/* 24px */
border-end-start-radius: 1.5rem;/* 24px */
rounded-s-full
border-start-start-radius: 9999px; border-end-start-radius: 9999px;
rounded-e-none
border-start-end-radius: 0px; border-end-end-radius: 0px;
rounded-e-sm
border-start-end-radius: 0.125rem;/* 2px */
border-end-end-radius: 0.125rem;/* 2px */
rounded-e
border-start-end-radius: 0.25rem;/* 4px */
border-end-end-radius: 0.25rem;/* 4px */
rounded-e-md
border-start-end-radius: 0.375rem;/* 6px */
border-end-end-radius: 0.375rem;/* 6px */
rounded-e-lg
border-start-end-radius: 0.5rem;/* 8px */
border-end-end-radius: 0.5rem;/* 8px */
rounded-e-xl
border-start-end-radius: 0.75rem;/* 12px */
border-end-end-radius: 0.75rem;/* 12px */
rounded-e-2xl
border-start-end-radius: 1rem;/* 16px */
border-end-end-radius: 1rem;/* 16px */
rounded-e-3xl
border-start-end-radius: 1.5rem;/* 24px */
border-end-end-radius: 1.5rem;/* 24px */
rounded-e-full
border-start-end-radius: 9999px; border-end-end-radius: 9999px;
rounded-t-none
border-top-left-radius: 0px; border-top-right-radius: 0px;
rounded-t-sm
border-top-left-radius: 0.125rem;/* 2px */
border-top-right-radius: 0.125rem;/* 2px */
rounded-t
border-top-left-radius: 0.25rem;/* 4px */
border-top-right-radius: 0.25rem;/* 4px */
rounded-t-md
border-top-left-radius: 0.375rem;/* 6px */
border-top-right-radius: 0.375rem;/* 6px */
rounded-t-lg
border-top-left-radius: 0.5rem;/* 8px */
border-top-right-radius: 0.5rem;/* 8px */
rounded-t-xl
border-top-left-radius: 0.75rem;/* 12px */
border-top-right-radius: 0.75rem;/* 12px */
rounded-t-2xl
border-top-left-radius: 1rem;/* 16px */
border-top-right-radius: 1rem;/* 16px */
rounded-t-3xl
border-top-left-radius: 1.5rem;/* 24px */
border-top-right-radius: 1.5rem;/* 24px */
rounded-t-full
border-top-left-radius: 9999px; border-top-right-radius: 9999px;
rounded-r-none
border-top-right-radius: 0px; border-bottom-right-radius: 0px;
rounded-r-sm
border-top-right-radius: 0.125rem;/* 2px */
border-bottom-right-radius: 0.125rem;/* 2px */
rounded-r
border-top-right-radius: 0.25rem;/* 4px */
border-bottom-right-radius: 0.25rem;/* 4px */
rounded-r-md
border-top-right-radius: 0.375rem;/* 6px */
border-bottom-right-radius: 0.375rem;/* 6px */
rounded-r-lg
border-top-right-radius: 0.5rem;/* 8px */
border-bottom-right-radius: 0.5rem;/* 8px */
rounded-r-xl
border-top-right-radius: 0.75rem;/* 12px */
border-bottom-right-radius: 0.75rem;/* 12px */
rounded-r-2xl
border-top-right-radius: 1rem;/* 16px */
border-bottom-right-radius: 1rem;/* 16px */
rounded-r-3xl
border-top-right-radius: 1.5rem;/* 24px */
border-bottom-right-radius: 1.5rem;/* 24px */
rounded-r-full
border-top-right-radius: 9999px; border-bottom-right-radius: 9999px;
rounded-b-none
border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;
rounded-b-sm
border-bottom-right-radius: 0.125rem;/* 2px */
border-bottom-left-radius: 0.125rem;/* 2px */
rounded-b
border-bottom-right-radius: 0.25rem;/* 4px */
border-bottom-left-radius: 0.25rem;/* 4px */
rounded-b-md
border-bottom-right-radius: 0.375rem;/* 6px */
border-bottom-left-radius: 0.375rem;/* 6px */
rounded-b-lg
border-bottom-right-radius: 0.5rem;/* 8px */
border-bottom-left-radius: 0.5rem;/* 8px */
rounded-b-xl
border-bottom-right-radius: 0.75rem;/* 12px */
border-bottom-left-radius: 0.75rem;/* 12px */
rounded-b-2xl
border-bottom-right-radius: 1rem;/* 16px */
border-bottom-left-radius: 1rem;/* 16px */
rounded-b-3xl
border-bottom-right-radius: 1.5rem;/* 24px */
border-bottom-left-radius: 1.5rem;/* 24px */
rounded-b-full
border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px;
rounded-l-none
border-top-left-radius: 0px; border-bottom-left-radius: 0px;
rounded-l-sm
border-top-left-radius: 0.125rem;/* 2px */
border-bottom-left-radius: 0.125rem;/* 2px */
rounded-l
border-top-left-radius: 0.25rem;/* 4px */
border-bottom-left-radius: 0.25rem;/* 4px */
rounded-l-md
border-top-left-radius: 0.375rem;/* 6px */
border-bottom-left-radius: 0.375rem;/* 6px */
rounded-l-lg
border-top-left-radius: 0.5rem;/* 8px */
border-bottom-left-radius: 0.5rem;/* 8px */
rounded-l-xl
border-top-left-radius: 0.75rem;/* 12px */
border-bottom-left-radius: 0.75rem;/* 12px */
rounded-l-2xl
border-top-left-radius: 1rem;/* 16px */
border-bottom-left-radius: 1rem;/* 16px */
rounded-l-3xl
border-top-left-radius: 1.5rem;/* 24px */
border-bottom-left-radius: 1.5rem;/* 24px */
rounded-l-full
border-top-left-radius: 9999px; border-bottom-left-radius: 9999px;
rounded-ss-none
border-start-start-radius: 0px;
rounded-ss-sm
border-start-start-radius: 0.125rem;/* 2px */
rounded-ss
border-start-start-radius: 0.25rem;/* 4px */
rounded-ss-md
border-start-start-radius: 0.375rem;/* 6px */
rounded-ss-lg
border-start-start-radius: 0.5rem;/* 8px */
rounded-ss-xl
border-start-start-radius: 0.75rem;/* 12px */
rounded-ss-2xl
border-start-start-radius: 1rem;/* 16px */
rounded-ss-3xl
border-start-start-radius: 1.5rem;/* 24px */
rounded-ss-full
border-start-start-radius: 9999px;
rounded-se-none
border-start-end-radius: 0px;
rounded-se-sm
border-start-end-radius: 0.125rem;/* 2px */
rounded-se
border-start-end-radius: 0.25rem;/* 4px */
rounded-se-md
border-start-end-radius: 0.375rem;/* 6px */
rounded-se-lg
border-start-end-radius: 0.5rem;/* 8px */
rounded-se-xl
border-start-end-radius: 0.75rem;/* 12px */
rounded-se-2xl
border-start-end-radius: 1rem;/* 16px */
rounded-se-3xl
border-start-end-radius: 1.5rem;/* 24px */
rounded-se-full
border-start-end-radius: 9999px;
rounded-ee-none
border-end-end-radius: 0px;
rounded-ee-sm
border-end-end-radius: 0.125rem;/* 2px */
rounded-ee
border-end-end-radius: 0.25rem;/* 4px */
rounded-ee-md
border-end-end-radius: 0.375rem;/* 6px */
rounded-ee-lg
border-end-end-radius: 0.5rem;/* 8px */
rounded-ee-xl
border-end-end-radius: 0.75rem;/* 12px */
rounded-ee-2xl
border-end-end-radius: 1rem;/* 16px */
rounded-ee-3xl
border-end-end-radius: 1.5rem;/* 24px */
rounded-ee-full
border-end-end-radius: 9999px;
rounded-es-none
border-end-start-radius: 0px;
rounded-es-sm
border-end-start-radius: 0.125rem;/* 2px */
rounded-es
border-end-start-radius: 0.25rem;/* 4px */
rounded-es-md
border-end-start-radius: 0.375rem;/* 6px */
rounded-es-lg
border-end-start-radius: 0.5rem;/* 8px */
rounded-es-xl
border-end-start-radius: 0.75rem;/* 12px */
rounded-es-2xl
border-end-start-radius: 1rem;/* 16px */
rounded-es-3xl
border-end-start-radius: 1.5rem;/* 24px */
rounded-es-full
border-end-start-radius: 9999px;
rounded-tl-none
border-top-left-radius: 0px;
rounded-tl-sm
border-top-left-radius: 0.125rem;/* 2px */
rounded-tl
border-top-left-radius: 0.25rem;/* 4px */
rounded-tl-md
border-top-left-radius: 0.375rem;/* 6px */
rounded-tl-lg
border-top-left-radius: 0.5rem;/* 8px */
rounded-tl-xl
border-top-left-radius: 0.75rem;/* 12px */
rounded-tl-2xl
border-top-left-radius: 1rem;/* 16px */
rounded-tl-3xl
border-top-left-radius: 1.5rem;/* 24px */
rounded-tl-full
border-top-left-radius: 9999px;
rounded-tr-none
border-top-right-radius: 0px;
rounded-tr-sm
border-top-right-radius: 0.125rem;/* 2px */
rounded-tr
border-top-right-radius: 0.25rem;/* 4px */
rounded-tr-md
border-top-right-radius: 0.375rem;/* 6px */
rounded-tr-lg
border-top-right-radius: 0.5rem;/* 8px */
rounded-tr-xl
border-top-right-radius: 0.75rem;/* 12px */
rounded-tr-2xl
border-top-right-radius: 1rem;/* 16px */
rounded-tr-3xl
border-top-right-radius: 1.5rem;/* 24px */
rounded-tr-full
border-top-right-radius: 9999px;
rounded-br-none
border-bottom-right-radius: 0px;
rounded-br-sm
border-bottom-right-radius: 0.125rem;/* 2px */
rounded-br
border-bottom-right-radius: 0.25rem;/* 4px */
rounded-br-md
border-bottom-right-radius: 0.375rem;/* 6px */
rounded-br-lg
border-bottom-right-radius: 0.5rem;/* 8px */
rounded-br-xl
border-bottom-right-radius: 0.75rem;/* 12px */
rounded-br-2xl
border-bottom-right-radius: 1rem;/* 16px */
rounded-br-3xl
border-bottom-right-radius: 1.5rem;/* 24px */
rounded-br-full
border-bottom-right-radius: 9999px;
rounded-bl-none
border-bottom-left-radius: 0px;
rounded-bl-sm
border-bottom-left-radius: 0.125rem;/* 2px */
rounded-bl
border-bottom-left-radius: 0.25rem;/* 4px */
rounded-bl-md
border-bottom-left-radius: 0.375rem;/* 6px */
rounded-bl-lg
border-bottom-left-radius: 0.5rem;/* 8px */
rounded-bl-xl
border-bottom-left-radius: 0.75rem;/* 12px */
rounded-bl-2xl
border-bottom-left-radius: 1rem;/* 16px */
rounded-bl-3xl
border-bottom-left-radius: 1.5rem;/* 24px */
rounded-bl-full
border-bottom-left-radius: 9999px;

Rounded

rounded-none
border-radius: 0px;
rounded-sm
border-radius: 0.125rem;/* 2px */
rounded
border-radius: 0.25rem;/* 4px */
rounded-md
border-radius: 0.375rem;/* 6px */
rounded-lg
border-radius: 0.5rem;/* 8px */
rounded-xl
border-radius: 0.75rem;/* 12px */
rounded-2xl
border-radius: 1rem;/* 16px */
rounded-3xl
border-radius: 1.5rem;/* 24px */
rounded-full
border-radius: 9999px;
rounded-s-none
border-start-start-radius: 0px; border-end-start-radius: 0px;
rounded-s-sm
border-start-start-radius: 0.125rem;/* 2px */
border-end-start-radius: 0.125rem;/* 2px */
rounded-s
border-start-start-radius: 0.25rem;/* 4px */
border-end-start-radius: 0.25rem;/* 4px */
rounded-s-md
border-start-start-radius: 0.375rem;/* 6px */
border-end-start-radius: 0.375rem;/* 6px */
rounded-s-lg
border-start-start-radius: 0.5rem;/* 8px */
border-end-start-radius: 0.5rem;/* 8px */
rounded-s-xl
border-start-start-radius: 0.75rem;/* 12px */
border-end-start-radius: 0.75rem;/* 12px */
rounded-s-2xl
border-start-start-radius: 1rem;/* 16px */
border-end-start-radius: 1rem;/* 16px */
rounded-s-3xl
border-start-start-radius: 1.5rem;/* 24px */
border-end-start-radius: 1.5rem;/* 24px */
rounded-s-full
border-start-start-radius: 9999px; border-end-start-radius: 9999px;
rounded-e-none
border-start-end-radius: 0px; border-end-end-radius: 0px;
rounded-e-sm
border-start-end-radius: 0.125rem;/* 2px */
border-end-end-radius: 0.125rem;/* 2px */
rounded-e
border-start-end-radius: 0.25rem;/* 4px */
border-end-end-radius: 0.25rem;/* 4px */
rounded-e-md
border-start-end-radius: 0.375rem;/* 6px */
border-end-end-radius: 0.375rem;/* 6px */
rounded-e-lg
border-start-end-radius: 0.5rem;/* 8px */
border-end-end-radius: 0.5rem;/* 8px */
rounded-e-xl
border-start-end-radius: 0.75rem;/* 12px */
border-end-end-radius: 0.75rem;/* 12px */
rounded-e-2xl
border-start-end-radius: 1rem;/* 16px */
border-end-end-radius: 1rem;/* 16px */
rounded-e-3xl
border-start-end-radius: 1.5rem;/* 24px */
border-end-end-radius: 1.5rem;/* 24px */
rounded-e-full
border-start-end-radius: 9999px; border-end-end-radius: 9999px;
rounded-t-none
border-top-left-radius: 0px; border-top-right-radius: 0px;
rounded-t-sm
border-top-left-radius: 0.125rem;/* 2px */
border-top-right-radius: 0.125rem;/* 2px */
rounded-t
border-top-left-radius: 0.25rem;/* 4px */
border-top-right-radius: 0.25rem;/* 4px */
rounded-t-md
border-top-left-radius: 0.375rem;/* 6px */
border-top-right-radius: 0.375rem;/* 6px */
rounded-t-lg
border-top-left-radius: 0.5rem;/* 8px */
border-top-right-radius: 0.5rem;/* 8px */
rounded-t-xl
border-top-left-radius: 0.75rem;/* 12px */
border-top-right-radius: 0.75rem;/* 12px */
rounded-t-2xl
border-top-left-radius: 1rem;/* 16px */
border-top-right-radius: 1rem;/* 16px */
rounded-t-3xl
border-top-left-radius: 1.5rem;/* 24px */
border-top-right-radius: 1.5rem;/* 24px */
rounded-t-full
border-top-left-radius: 9999px; border-top-right-radius: 9999px;
rounded-r-none
border-top-right-radius: 0px; border-bottom-right-radius: 0px;
rounded-r-sm
border-top-right-radius: 0.125rem;/* 2px */
border-bottom-right-radius: 0.125rem;/* 2px */
rounded-r
border-top-right-radius: 0.25rem;/* 4px */
border-bottom-right-radius: 0.25rem;/* 4px */
rounded-r-md
border-top-right-radius: 0.375rem;/* 6px */
border-bottom-right-radius: 0.375rem;/* 6px */
rounded-r-lg
border-top-right-radius: 0.5rem;/* 8px */
border-bottom-right-radius: 0.5rem;/* 8px */
rounded-r-xl
border-top-right-radius: 0.75rem;/* 12px */
border-bottom-right-radius: 0.75rem;/* 12px */
rounded-r-2xl
border-top-right-radius: 1rem;/* 16px */
border-bottom-right-radius: 1rem;/* 16px */
rounded-r-3xl
border-top-right-radius: 1.5rem;/* 24px */
border-bottom-right-radius: 1.5rem;/* 24px */
rounded-r-full
border-top-right-radius: 9999px; border-bottom-right-radius: 9999px;
rounded-b-none
border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;
rounded-b-sm
border-bottom-right-radius: 0.125rem;/* 2px */
border-bottom-left-radius: 0.125rem;/* 2px */
rounded-b
border-bottom-right-radius: 0.25rem;/* 4px */
border-bottom-left-radius: 0.25rem;/* 4px */
rounded-b-md
border-bottom-right-radius: 0.375rem;/* 6px */
border-bottom-left-radius: 0.375rem;/* 6px */
rounded-b-lg
border-bottom-right-radius: 0.5rem;/* 8px */
border-bottom-left-radius: 0.5rem;/* 8px */
rounded-b-xl
border-bottom-right-radius: 0.75rem;/* 12px */
border-bottom-left-radius: 0.75rem;/* 12px */
rounded-b-2xl
border-bottom-right-radius: 1rem;/* 16px */
border-bottom-left-radius: 1rem;/* 16px */
rounded-b-3xl
border-bottom-right-radius: 1.5rem;/* 24px */
border-bottom-left-radius: 1.5rem;/* 24px */
rounded-b-full
border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px;
rounded-l-none
border-top-left-radius: 0px; border-bottom-left-radius: 0px;
rounded-l-sm
border-top-left-radius: 0.125rem;/* 2px */
border-bottom-left-radius: 0.125rem;/* 2px */
rounded-l
border-top-left-radius: 0.25rem;/* 4px */
border-bottom-left-radius: 0.25rem;/* 4px */
rounded-l-md
border-top-left-radius: 0.375rem;/* 6px */
border-bottom-left-radius: 0.375rem;/* 6px */
rounded-l-lg
border-top-left-radius: 0.5rem;/* 8px */
border-bottom-left-radius: 0.5rem;/* 8px */
rounded-l-xl
border-top-left-radius: 0.75rem;/* 12px */
border-bottom-left-radius: 0.75rem;/* 12px */
rounded-l-2xl
border-top-left-radius: 1rem;/* 16px */
border-bottom-left-radius: 1rem;/* 16px */
rounded-l-3xl
border-top-left-radius: 1.5rem;/* 24px */
border-bottom-left-radius: 1.5rem;/* 24px */
rounded-l-full
border-top-left-radius: 9999px; border-bottom-left-radius: 9999px;
rounded-ss-none
border-start-start-radius: 0px;
rounded-ss-sm
border-start-start-radius: 0.125rem;/* 2px */
rounded-ss
border-start-start-radius: 0.25rem;/* 4px */
rounded-ss-md
border-start-start-radius: 0.375rem;/* 6px */
rounded-ss-lg
border-start-start-radius: 0.5rem;/* 8px */
rounded-ss-xl
border-start-start-radius: 0.75rem;/* 12px */
rounded-ss-2xl
border-start-start-radius: 1rem;/* 16px */
rounded-ss-3xl
border-start-start-radius: 1.5rem;/* 24px */
rounded-ss-full
border-start-start-radius: 9999px;
rounded-se-none
border-start-end-radius: 0px;
rounded-se-sm
border-start-end-radius: 0.125rem;/* 2px */
rounded-se
border-start-end-radius: 0.25rem;/* 4px */
rounded-se-md
border-start-end-radius: 0.375rem;/* 6px */
rounded-se-lg
border-start-end-radius: 0.5rem;/* 8px */
rounded-se-xl
border-start-end-radius: 0.75rem;/* 12px */
rounded-se-2xl
border-start-end-radius: 1rem;/* 16px */
rounded-se-3xl
border-start-end-radius: 1.5rem;/* 24px */
rounded-se-full
border-start-end-radius: 9999px;
rounded-ee-none
border-end-end-radius: 0px;
rounded-ee-sm
border-end-end-radius: 0.125rem;/* 2px */
rounded-ee
border-end-end-radius: 0.25rem;/* 4px */
rounded-ee-md
border-end-end-radius: 0.375rem;/* 6px */
rounded-ee-lg
border-end-end-radius: 0.5rem;/* 8px */
rounded-ee-xl
border-end-end-radius: 0.75rem;/* 12px */
rounded-ee-2xl
border-end-end-radius: 1rem;/* 16px */
rounded-ee-3xl
border-end-end-radius: 1.5rem;/* 24px */
rounded-ee-full
border-end-end-radius: 9999px;
rounded-es-none
border-end-start-radius: 0px;
rounded-es-sm
border-end-start-radius: 0.125rem;/* 2px */
rounded-es
border-end-start-radius: 0.25rem;/* 4px */
rounded-es-md
border-end-start-radius: 0.375rem;/* 6px */
rounded-es-lg
border-end-start-radius: 0.5rem;/* 8px */
rounded-es-xl
border-end-start-radius: 0.75rem;/* 12px */
rounded-es-2xl
border-end-start-radius: 1rem;/* 16px */
rounded-es-3xl
border-end-start-radius: 1.5rem;/* 24px */
rounded-es-full
border-end-start-radius: 9999px;
rounded-tl-none
border-top-left-radius: 0px;
rounded-tl-sm
border-top-left-radius: 0.125rem;/* 2px */
rounded-tl
border-top-left-radius: 0.25rem;/* 4px */
rounded-tl-md
border-top-left-radius: 0.375rem;/* 6px */
rounded-tl-lg
border-top-left-radius: 0.5rem;/* 8px */
rounded-tl-xl
border-top-left-radius: 0.75rem;/* 12px */
rounded-tl-2xl
border-top-left-radius: 1rem;/* 16px */
rounded-tl-3xl
border-top-left-radius: 1.5rem;/* 24px */
rounded-tl-full
border-top-left-radius: 9999px;
rounded-tr-none
border-top-right-radius: 0px;
rounded-tr-sm
border-top-right-radius: 0.125rem;/* 2px */
rounded-tr
border-top-right-radius: 0.25rem;/* 4px */
rounded-tr-md
border-top-right-radius: 0.375rem;/* 6px */
rounded-tr-lg
border-top-right-radius: 0.5rem;/* 8px */
rounded-tr-xl
border-top-right-radius: 0.75rem;/* 12px */
rounded-tr-2xl
border-top-right-radius: 1rem;/* 16px */
rounded-tr-3xl
border-top-right-radius: 1.5rem;/* 24px */
rounded-tr-full
border-top-right-radius: 9999px;
rounded-br-none
border-bottom-right-radius: 0px;
rounded-br-sm
border-bottom-right-radius: 0.125rem;/* 2px */
rounded-br
border-bottom-right-radius: 0.25rem;/* 4px */
rounded-br-md
border-bottom-right-radius: 0.375rem;/* 6px */
rounded-br-lg
border-bottom-right-radius: 0.5rem;/* 8px */
rounded-br-xl
border-bottom-right-radius: 0.75rem;/* 12px */
rounded-br-2xl
border-bottom-right-radius: 1rem;/* 16px */
rounded-br-3xl
border-bottom-right-radius: 1.5rem;/* 24px */
rounded-br-full
border-bottom-right-radius: 9999px;
rounded-bl-none
border-bottom-left-radius: 0px;
rounded-bl-sm
border-bottom-left-radius: 0.125rem;/* 2px */
rounded-bl
border-bottom-left-radius: 0.25rem;/* 4px */
rounded-bl-md
border-bottom-left-radius: 0.375rem;/* 6px */
rounded-bl-lg
border-bottom-left-radius: 0.5rem;/* 8px */
rounded-bl-xl
border-bottom-left-radius: 0.75rem;/* 12px */
rounded-bl-2xl
border-bottom-left-radius: 1rem;/* 16px */
rounded-bl-3xl
border-bottom-left-radius: 1.5rem;/* 24px */
rounded-bl-full
border-bottom-left-radius: 9999px;

CUSTOMIZE

Screen Size

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px', // => @media (min-width: 640px) { ... }
      'md': '768px', // => @media (min-width: 768px) { ... }
      'lg': '1024px', // => @media (min-width: 1024px) { ... }
      'xl': '1280px', // => @media (min-width: 1280px) { ... }
      '2xl': '1536px', // => @media (min-width: 1536px) { ... }
    }
  }
}

Width

module.exports = {
  theme: {
    extend: {
      width: {
        '128': '32rem',
      }
    }
  }
}

Height

module.exports = {
  theme: {
    extend: {
      height: {
        '128': '32rem',
      }
    }
  }
}

Padding

module.exports = {
  theme: {
    extend: {
      padding: {
        '5px': '5px',
      }
    }
  }
}

Border Width

module.exports = {
  theme: {
    extend: {
      borderWidth: {
        '3': '3px',
      }
    }
  }
}

Border Radius

module.exports = {
  theme: {
    extend: {
      borderRadius: {
        'large': '12px',
      },
    }
  }
}