A searchable, categorized reference of Tailwind CSS utility classes with their rendered CSS output.
324 of 324classes · click a class to copy it
p-0
padding: 0px;
p-0.5
padding: 0.125rem (2px);
p-1
padding: 0.25rem (4px);
p-1.5
padding: 0.375rem (6px);
p-2
padding: 0.5rem (8px);
p-3
padding: 0.75rem (12px);
p-4
padding: 1rem (16px);
p-5
padding: 1.25rem (20px);
p-6
padding: 1.5rem (24px);
p-8
padding: 2rem (32px);
p-10
padding: 2.5rem (40px);
p-12
padding: 3rem (48px);
p-16
padding: 4rem (64px);
p-20
padding: 5rem (80px);
p-24
padding: 6rem (96px);
px-0
padding-left: 0px; padding-right: 0px;
px-0.5
padding-left: 0.125rem (2px); padding-right: 0.125rem (2px);
px-1
padding-left: 0.25rem (4px); padding-right: 0.25rem (4px);
px-1.5
padding-left: 0.375rem (6px); padding-right: 0.375rem (6px);
px-2
padding-left: 0.5rem (8px); padding-right: 0.5rem (8px);
px-3
padding-left: 0.75rem (12px); padding-right: 0.75rem (12px);
px-4
padding-left: 1rem (16px); padding-right: 1rem (16px);
px-5
padding-left: 1.25rem (20px); padding-right: 1.25rem (20px);
px-6
padding-left: 1.5rem (24px); padding-right: 1.5rem (24px);
px-8
padding-left: 2rem (32px); padding-right: 2rem (32px);
px-10
padding-left: 2.5rem (40px); padding-right: 2.5rem (40px);
px-12
padding-left: 3rem (48px); padding-right: 3rem (48px);
px-16
padding-left: 4rem (64px); padding-right: 4rem (64px);
px-20
padding-left: 5rem (80px); padding-right: 5rem (80px);
px-24
padding-left: 6rem (96px); padding-right: 6rem (96px);
py-0
padding-top: 0px; padding-bottom: 0px;
py-0.5
padding-top: 0.125rem (2px); padding-bottom: 0.125rem (2px);
py-1
padding-top: 0.25rem (4px); padding-bottom: 0.25rem (4px);
py-1.5
padding-top: 0.375rem (6px); padding-bottom: 0.375rem (6px);
py-2
padding-top: 0.5rem (8px); padding-bottom: 0.5rem (8px);
py-3
padding-top: 0.75rem (12px); padding-bottom: 0.75rem (12px);
py-4
padding-top: 1rem (16px); padding-bottom: 1rem (16px);
py-5
padding-top: 1.25rem (20px); padding-bottom: 1.25rem (20px);
py-6
padding-top: 1.5rem (24px); padding-bottom: 1.5rem (24px);
py-8
padding-top: 2rem (32px); padding-bottom: 2rem (32px);
py-10
padding-top: 2.5rem (40px); padding-bottom: 2.5rem (40px);
py-12
padding-top: 3rem (48px); padding-bottom: 3rem (48px);
py-16
padding-top: 4rem (64px); padding-bottom: 4rem (64px);
py-20
padding-top: 5rem (80px); padding-bottom: 5rem (80px);
py-24
padding-top: 6rem (96px); padding-bottom: 6rem (96px);
m-0
margin: 0px;
m-0.5
margin: 0.125rem (2px);
m-1
margin: 0.25rem (4px);
m-1.5
margin: 0.375rem (6px);
m-2
margin: 0.5rem (8px);
m-3
margin: 0.75rem (12px);
m-4
margin: 1rem (16px);
m-5
margin: 1.25rem (20px);
m-6
margin: 1.5rem (24px);
m-8
margin: 2rem (32px);
m-10
margin: 2.5rem (40px);
m-12
margin: 3rem (48px);
m-16
margin: 4rem (64px);
m-20
margin: 5rem (80px);
m-24
margin: 6rem (96px);
mx-0
margin-left: 0px; margin-right: 0px;
mx-0.5
margin-left: 0.125rem (2px); margin-right: 0.125rem (2px);
mx-1
margin-left: 0.25rem (4px); margin-right: 0.25rem (4px);
mx-1.5
margin-left: 0.375rem (6px); margin-right: 0.375rem (6px);
mx-2
margin-left: 0.5rem (8px); margin-right: 0.5rem (8px);
mx-3
margin-left: 0.75rem (12px); margin-right: 0.75rem (12px);
mx-4
margin-left: 1rem (16px); margin-right: 1rem (16px);
mx-5
margin-left: 1.25rem (20px); margin-right: 1.25rem (20px);
mx-6
margin-left: 1.5rem (24px); margin-right: 1.5rem (24px);
mx-8
margin-left: 2rem (32px); margin-right: 2rem (32px);
mx-10
margin-left: 2.5rem (40px); margin-right: 2.5rem (40px);
mx-12
margin-left: 3rem (48px); margin-right: 3rem (48px);
mx-16
margin-left: 4rem (64px); margin-right: 4rem (64px);
mx-20
margin-left: 5rem (80px); margin-right: 5rem (80px);
mx-24
margin-left: 6rem (96px); margin-right: 6rem (96px);
my-0
margin-top: 0px; margin-bottom: 0px;
my-0.5
margin-top: 0.125rem (2px); margin-bottom: 0.125rem (2px);
my-1
margin-top: 0.25rem (4px); margin-bottom: 0.25rem (4px);
my-1.5
margin-top: 0.375rem (6px); margin-bottom: 0.375rem (6px);
my-2
margin-top: 0.5rem (8px); margin-bottom: 0.5rem (8px);
my-3
margin-top: 0.75rem (12px); margin-bottom: 0.75rem (12px);
my-4
margin-top: 1rem (16px); margin-bottom: 1rem (16px);
my-5
margin-top: 1.25rem (20px); margin-bottom: 1.25rem (20px);
my-6
margin-top: 1.5rem (24px); margin-bottom: 1.5rem (24px);
my-8
margin-top: 2rem (32px); margin-bottom: 2rem (32px);
my-10
margin-top: 2.5rem (40px); margin-bottom: 2.5rem (40px);
my-12
margin-top: 3rem (48px); margin-bottom: 3rem (48px);
my-16
margin-top: 4rem (64px); margin-bottom: 4rem (64px);
my-20
margin-top: 5rem (80px); margin-bottom: 5rem (80px);
my-24
margin-top: 6rem (96px); margin-bottom: 6rem (96px);
gap-0
gap: 0px;
gap-0.5
gap: 0.125rem (2px);
gap-1
gap: 0.25rem (4px);
gap-1.5
gap: 0.375rem (6px);
gap-2
gap: 0.5rem (8px);
gap-3
gap: 0.75rem (12px);
gap-4
gap: 1rem (16px);
gap-5
gap: 1.25rem (20px);
gap-6
gap: 1.5rem (24px);
gap-8
gap: 2rem (32px);
gap-10
gap: 2.5rem (40px);
gap-12
gap: 3rem (48px);
gap-16
gap: 4rem (64px);
gap-20
gap: 5rem (80px);
gap-24
gap: 6rem (96px);
text-xs
font-size: 0.75rem; line-height: 1rem;
text-sm
font-size: 0.875rem; line-height: 1.25rem;
text-base
font-size: 1rem; line-height: 1.5rem;
text-lg
font-size: 1.125rem; line-height: 1.75rem;
text-xl
font-size: 1.25rem; line-height: 1.75rem;
text-2xl
font-size: 1.5rem; line-height: 2rem;
text-3xl
font-size: 1.875rem; line-height: 2.25rem;
text-4xl
font-size: 2.25rem; line-height: 2.5rem;
text-5xl
font-size: 3rem; line-height: 1;
text-6xl
font-size: 3.75rem; line-height: 1;
font-thin
font-weight: 100;
font-extralight
font-weight: 200;
font-light
font-weight: 300;
font-normal
font-weight: 400;
font-medium
font-weight: 500;
font-semibold
font-weight: 600;
font-bold
font-weight: 700;
font-extrabold
font-weight: 800;
font-black
font-weight: 900;
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;
tracking-tighter
letter-spacing: -0.05em;
tracking-tight
letter-spacing: -0.025em;
tracking-normal
letter-spacing: 0em;
tracking-wide
letter-spacing: 0.025em;
tracking-wider
letter-spacing: 0.05em;
tracking-widest
letter-spacing: 0.1em;
text-left
text-align: left;
text-center
text-align: center;
text-right
text-align: right;
text-justify
text-align: justify;
italic
font-style: italic;
not-italic
font-style: normal;
underline
text-decoration-line: underline;
line-through
text-decoration-line: line-through;
no-underline
text-decoration-line: none;
uppercase
text-transform: uppercase;
lowercase
text-transform: lowercase;
capitalize
text-transform: capitalize;
normal-case
text-transform: none;
truncate
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
whitespace-nowrap
white-space: nowrap;
whitespace-normal
white-space: normal;
break-words
overflow-wrap: break-word;
flex
display: flex;
inline-flex
display: inline-flex;
flex-row
flex-direction: row;
flex-row-reverse
flex-direction: row-reverse;
flex-col
flex-direction: column;
flex-col-reverse
flex-direction: column-reverse;
flex-wrap
flex-wrap: wrap;
flex-nowrap
flex-wrap: nowrap;
flex-1
flex: 1 1 0%;
flex-auto
flex: 1 1 auto;
flex-initial
flex: 0 1 auto;
flex-none
flex: none;
grid
display: grid;
inline-grid
display: inline-grid;
grid-cols-1
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-12
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-rows-1
grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2
grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3
grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4
grid-template-rows: repeat(4, minmax(0, 1fr));
items-start
align-items: flex-start;
items-center
align-items: center;
items-end
align-items: flex-end;
items-stretch
align-items: stretch;
items-baseline
align-items: baseline;
justify-start
justify-content: flex-start;
justify-center
justify-content: center;
justify-end
justify-content: flex-end;
justify-between
justify-content: space-between;
justify-around
justify-content: space-around;
justify-evenly
justify-content: space-evenly;
content-start
align-content: flex-start;
content-center
align-content: center;
content-between
align-content: space-between;
self-start
align-self: flex-start;
self-center
align-self: center;
self-end
align-self: flex-end;
self-stretch
align-self: stretch;
place-items-center
place-items: center;
w-auto
width: auto;
w-px
width: 1px;
w-full
width: 100%;
w-screen
width: 100vw;
w-fit
width: fit-content;
w-1/2
width: 50%;
w-1/3
width: 33.333333%;
w-2/3
width: 66.666667%;
w-1/4
width: 25%;
w-3/4
width: 75%;
w-4
width: 1rem (16px);
w-8
width: 2rem (32px);
w-16
width: 4rem (64px);
w-32
width: 8rem (128px);
w-64
width: 16rem (256px);
h-auto
height: auto;
h-full
height: 100%;
h-screen
height: 100vh;
h-fit
height: fit-content;
h-4
height: 1rem (16px);
h-8
height: 2rem (32px);
h-16
height: 4rem (64px);
h-32
height: 8rem (128px);
h-64
height: 16rem (256px);
h-96
height: 24rem (384px);
min-w-0
min-width: 0px;
min-w-full
min-width: 100%;
max-w-md
max-width: 28rem (448px);
max-w-lg
max-width: 32rem (512px);
max-w-xl
max-width: 36rem (576px);
max-w-2xl
max-width: 42rem (672px);
max-w-full
max-width: 100%;
min-h-screen
min-height: 100vh;
min-h-full
min-height: 100%;
bg-slate-500
background-color: #64748b;
text-slate-500
color: #64748b;
border-slate-500
border-color: #64748b;
bg-red-500
background-color: #ef4444;
text-red-500
color: #ef4444;
border-red-500
border-color: #ef4444;
bg-orange-500
background-color: #f97316;
text-orange-500
color: #f97316;
border-orange-500
border-color: #f97316;
bg-yellow-500
background-color: #eab308;
text-yellow-500
color: #eab308;
border-yellow-500
border-color: #eab308;
bg-green-500
background-color: #22c55e;
text-green-500
color: #22c55e;
border-green-500
border-color: #22c55e;
bg-blue-500
background-color: #3b82f6;
text-blue-500
color: #3b82f6;
border-blue-500
border-color: #3b82f6;
bg-purple-500
background-color: #a855f7;
text-purple-500
color: #a855f7;
border-purple-500
border-color: #a855f7;
bg-pink-500
background-color: #ec4899;
text-pink-500
color: #ec4899;
border-pink-500
border-color: #ec4899;
bg-white
background-color: #ffffff;
bg-black
background-color: #000000;
bg-transparent
background-color: transparent;
text-white
color: #ffffff;
text-black
color: #000000;
border
border-width: 1px;
border-0
border-width: 0px;
border-2
border-width: 2px;
border-4
border-width: 4px;
border-8
border-width: 8px;
border-t
border-top-width: 1px;
border-r
border-right-width: 1px;
border-b
border-bottom-width: 1px;
border-l
border-left-width: 1px;
border-dashed
border-style: dashed;
border-dotted
border-style: dotted;
border-double
border-style: double;
border-solid
border-style: solid;
border-none
border-style: none;
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;
shadow-sm
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadow
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
shadow-md
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
shadow-lg
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
shadow-xl
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
shadow-2xl
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
shadow-none
box-shadow: none;
shadow-inner
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
opacity-0
opacity: 0;
opacity-10
opacity: 0.1;
opacity-25
opacity: 0.25;
opacity-50
opacity: 0.5;
opacity-75
opacity: 0.75;
opacity-90
opacity: 0.9;
opacity-100
opacity: 1;
blur-sm
filter: blur(4px);
blur
filter: blur(8px);
blur-md
filter: blur(12px);
blur-lg
filter: blur(16px);
grayscale
filter: grayscale(100%);
brightness-50
filter: brightness(0.5);
brightness-150
filter: brightness(1.5);
static
position: static;
relative
position: relative;
absolute
position: absolute;
fixed
position: fixed;
sticky
position: sticky;
inset-0
top: 0px; right: 0px; bottom: 0px; left: 0px;
inset-x-0
left: 0px; right: 0px;
inset-y-0
top: 0px; bottom: 0px;
top-0
top: 0px;
right-0
right: 0px;
bottom-0
bottom: 0px;
left-0
left: 0px;
top-1/2
top: 50%;
left-1/2
left: 50%;
z-0
z-index: 0;
z-10
z-index: 10;
z-20
z-index: 20;
z-50
z-index: 50;
z-auto
z-index: auto;
Tools, guides, and categories connected to this page