Monster Framework - Responsive classes Cheat Sheet by anvesh

grid
grid-c­ols-1	grid-c­ols-2	grid-c­ols-3	grid-c­ols-4
grid-c­ols-5	grid-c­ols-6	grid-c­ols­-none

grid-r­ows-1

grid-r­ows-2

grid-r­ows-3

grid-r­ows­-none

col-end-1	col-end-2	col-end-3	col-end-4
col-end-5	col-end-6	col-end-7	col-en­d-auto
col-st­art-1	col-st­art-2	col-st­art-3	col-st­art-4
col-st­art-5	col-st­art-6	col-st­art-7	col-st­art­-auto
col-auto	col-span-1	col-span-2	col-span-3
col-span-4	col-span-5	col-span-6

row-auto	row-span-1	row-span-2	row-span-3
row-st­art-1	row-st­art-2	row-st­art-3	row-st­art-4
row-st­art­-auto	row-en­d-auto
row-end-1	row-end-2	row-end-3	row-end-4

grid-f­low-row

grid-f­low-col

grid-f­low­-ro­w-dense

grid-f­low­-co­l-dense

gap-px	gap-2	gap-4	gap-6
gap-8	gap-12	gap-16
row-gap-0	row-gap-2	row-gap-4	row-gap-6
row-gap-8	row-gap-12

avatar

avatar-sm

avatar-lg

avatar-xl

btn-pr­imary	btn-pr­ima­ry-­trans	btn-se­condary	btn-li­ght­-trans
btn-l	btn-m	btn-s

bg	bg-primary	bg-sec­ondary	bg-ter­tiary
bg-alt	bg-white	bg-black	bg-pla­ceh­older
bg-pla­ceh­old­er-alt

color-­primary	color-­sec­ondary	color-­ter­tiary	color-dark
color-­par­agraph	color-­light	color-­par­agr­aph­-light

card-n­ormal	card-loose	card-tight	card-snug
card-r­elaxed	card-none

rounded
rounded-sm	rounded-md	rounded-lg	rounde­d-full
rounde­d-r-lg	rounde­d-b-lg	rounde­d-l-lg	rounde­d-t-lg
rounded-r	rounded-l	rounded-b	rounded-t

border­-none	border-px	border-2	border-t
border-r	border-b	border-l

horizontal	vertical	horizo­nta­l-wrap	centered
items-­center	conten­t-c­enter	conten­t-b­etween	conten­t-a­round

w-auto	w-1by2	w-1by3	w-2by3
w-1by4	w-2by4	w-3by4	w-1by6
w-2by6	w-3by6	w-4by6	w-5by6
w-1by5	w-10p	w-full	w-screen

h-auto

h-full

h-screen

p-0	p-1	p-2	p-3
p-4	p-5	p-6	p-8
p-12	p-16
px-1	px-2	px-3	px-4
px-5	px-6	px-8	px-12
px-16
py-1	py-2	py-3	py-4
py-5	py-6	py-8	py-12
py-16

mx-auto	my-auto
mt-auto	mr-auto	mb-auto	ml-auto
mr-0	mr-2	mr-3	mr-4
mr-5	mr-6	mr-8	mr-12
mr-16	mr-24
mb-2	mb-3	mb-4	mb-5
mb-6	mb-8	mb-12	mb-16
mb-24

shadow-xs	shadow-sm	shadow	shadow-md
shadow-lg	shadow-xl	shadow-2xl

opacity	opacity-25	opacity-50	opacity-75
opacit­y-100	hover-­opa­city-0	hover-­opa­city-25	hover-­opa­city-50
hover-­opa­city-75	hover-­opa­cit­y-100

h1	h2	h3	h4
h5	h6

text-sm	text-base	text-lg	text-xl
text-2xl

font-n­ormal

font-m­edium

font-s­emibold

font-bold

icon-s­m-p­rimary	icon-m­d-p­rimary	icon-l­g-p­rimary	icon-x­l-p­rimary
icon-s­m-dark	icon-m­d-dark	icon-l­g-dark	icon-x­l-dark
icon-s­m-light	icon-l­g-light	icon-x­l-light	icon-2­xl-­light
icon-s­oli­d-s­m-light	icon-s­oli­d-m­d-light	icon-s­oli­d-l­g-p­rimary

xl-col­-auto	lg-col­-auto	md-col­-auto	sm-col­-auto
xl-col­-st­art­-auto	lg-col­-st­art­-auto	md-col­-st­art­-auto	sm-col­-st­art­-auto
xl-col­-st­art-1	lg-col­-st­art-1	md-col­-st­art-1	sm-col­-st­art-1
xl-col­-st­art-2	lg-col­-st­art-2	md-col­-st­art-2	sm-col­-st­art-2
xl-col­-st­art-3	lg-col­-st­art-3	md-col­-st­art-3	sm-col­-st­art-3
xl-col­-st­art-4	lg-col­-st­art-4	md-col­-st­art-4	sm-col­-st­art-4
xl-col­-st­art-5	lg-col­-st­art-5	md-col­-st­art-5
xl-col­-st­art-6
xl-col­-en­d-auto	lg-col­-en­d-auto	md-col­-en­d-auto	sm-col­-en­d-auto
xl-col­-end-1	lg-col­-end-1	md-col­-end-1	sm-col­-end-1
xl-col­-end-2	lg-col­-end-2	md-col­-end-2	sm-col­-end-2
xl-col­-end-3	lg-col­-end-3	md-col­-end-3	sm-col­-end-3
xl-col­-end-4	lg-col­-end-4	md-col­-end-4	sm-col­-end-4
xl-col­-end-5	lg-col­-end-5	md-col­-end-5
xl-col­-end-6
xl-col­-span-1	lg-col­-span-1	md-col­-span-1	sm-col­-span-1
xl-col­-span-2	lg-col­-span-2	md-col­-span-2	sm-col­-span-2
xl-col­-span-3	lg-col­-span-3	md-col­-span-3	sm-col­-span-3
xl-col­-span-4	lg-col­-span-4	md-col­-span-4
xl-col­-span-5

xl-gri­d-c­ols-1	lg-gri­d-c­ols-1	md-gri­d-c­ols-1	sm-gri­d-c­ols-1
xl-gri­d-c­ols-2	lg-gri­d-c­ols-2	md-gri­d-c­ols-2	sm-gri­d-c­ols-2
xl-gri­d-c­ols-3	lg-gri­d-c­ols-3	md-gri­d-c­ols-3	sm-gri­d-c­ols-3
xl-gri­d-c­ols-4	lg-gri­d-c­ols-4	md-gri­d-c­ols-4
xl-gri­d-c­ols-5
xl-gri­d-c­ols­-none	lg-gri­d-c­ols­-none	md-gri­d-c­ols­-none	sm-gri­d-c­ols­-none

xl-h-full	lg-h-full	md-h-full	sm-h-full
xl-h-s­creen	lg-h-s­creen	md-h-s­creen	sm-h-s­creen

	lg-dis­pla­y-none	md-dis­pla­y-none	sm-dis­pla­y-none
	lg-hidden	md-hidden	sm-hidden

xl-tex­t-2xl	lg-tex­t-2xl
xl-text-xl	lg-text-xl	md-text-xl	sm-text-xl
xl-text-lg	lg-text-lg	md-text-lg	sm-text-lg
	lg-tex­t-base	md-tex­t-base	sm-tex­t-base
	lg-text-sm	md-text-sm	sm-text-sm

xl-mx-auto	lg-mx-auto	md-mx-auto	sm-mx-auto
		md-ml-auto	sm-ml-auto
		md-mr-auto
	lg-my-auto
xl-mr-12
xl-mr-8	lg-mr-8	md-mr-8	sm-mr-8
xl-mr-6	lg-mr-6	md-mr-6	sm-mr-6
xl-mr-5	lg-mr-5	md-mr-5	sm-mr-5
	lg-mr-4	md-mr-4	sm-mr-4
	lg-mr-3	md-mr-3	sm-mr-3
	lg-mr-2	md-mr-2	sm-mr-2
		md-mr-1	sm-mr-1
	lg-mr-0	md-mr-0	sm-mr-0
xl-mb-12	lg-mb-12
xl-mb-8	lg-mb-8	md-mb-8	sm-mb-8
xl-mb-6	lg-mb-6	md-mb-6	sm-mb-6
xl-mb-5	lg-mb-5	md-mb-5	sm-mb-5
	lg-mb-4	md-mb-4	sm-mb-4
	lg-mb-3	md-mb-3	sm-mb-3
	lg-mb-2	md-mb-2
		md-mb-1
		md-mb-0
			sm-mt-3
			sm-mt-2
			sm-mt-1
			sm-mt-0

xl-w-full	lg-w-full	md-w-full	sm-w-full
xl-w-1by2	lg-w-1by2	md-w-1by2	sm-w-1by2
xl-w-1by3	lg-w-1by3	md-w-1by3
xl-w-2by3	lg-w-2by3	md-w-2by3
xl-w-1by4	lg-w-1by4
xl-w-2by4	lg-w-2by4
xl-w-3by4	lg-w-3by4

		md-p-1	sm-p-1
		md-p-2	sm-p-2
	lg-p-3	md-p-3	sm-p-3
xl-p-4	lg-p-4	md-p-4	sm-p-4
xl-p-5	lg-p-5	md-p-5	sm-p-5
xl-p-6	lg-p-6	md-p-6	sm-p-6
xl-p-8	lg-p-8	md-p-8	sm-p-8
xl-p-12
		md-px-1	sm-px-1
		md-px-2	sm-px-2
	lg-px-3	md-px-3	sm-px-3
xl-px-4	lg-px-4	md-px-4	sm-px-4
xl-px-5	lg-px-5	md-px-5	sm-px-5
xl-px-6	lg-px-6	md-px-6	sm-px-6
xl-px-8	lg-px-8	md-px-8	sm-px-8
xl-px-12		md-px-12
		md-py-1	sm-py-1
		md-py-2	sm-py-2
	lg-py-83	md-py-3	sm-py-3
xl-py-4	lg-py-4	md-py-4	sm-py-4
xl-py-5	lg-py-5	md-py-5	sm-py-5
xl-py-6	lg-py-6	md-py-6	sm-py-6
xl-py-8	lg-py-8	md-py-8	sm-py-8
xl-py-12		md-py-12

xl-hor­izontal	lg-hor­izontal	md-hor­izontal	sm-hor­izontal
xl-ver­tical	lg-ver­tical	md-ver­tical	sm-ver­tical
xl-hor­izo­nta­l-wrap	lg-hor­izo­nta­l-wrap	md-hor­izo­nta­l-wrap	sm-hor­izo­nta­l-wrap
		md-cen­tered	sm-cen­tered