Cheatsheet 1.5.9

Layout

Display

Sets the display box type of an element.

.hidden	display: none;
.inline-block	display: inline-block;
.inline	display: inline;
.flex	display: flex;
.grid	display: grid
.inline-grid	display: inline-grid

Object Fit

Sets how the content of a replaced element (img or video tag) should be resized.

.object-contain	object-fit: contain;
.object-cover	object-fit: cover;

Object Position

Sets the alignment of the selected replaced element.

.object-bottom	object-position: bottom;
.object-left	object-position: left;
.object-right	object-position: right;
.object-top	object-position: top;

Overflow

Sets how to handle content that's too big for its container.

.overflow-hidden	overflow: hidden;
.overflow-y-scroll	overflow-y: scroll;

Position

Sets an element's position.

.relative	position: relative;
.sticky	position: sticky; top: 0;
.sticky-sm	top: 2.5%;
.sticky-md	top: 5%;
.sticky-lg	top: 10%;
.sticky-xl	top: 20%;

Z-index

Sets the z-order ("stack order") of a positioned element.

.z-99

z-index: 99;

Flexbox

Display

Sets element to be a flex container.

.flex

display: flex;

Flex Direction

Sets direction of flex items.

.flex-row	display: flex; flex-direction: row;
.flex-col	display: flex; flex-direction: column;

Flex Wrap

Creates how flex items wrap.

.flex-wrap

display: flex; flex-wrap: wrap;

Order

Controls how flex items are ordered.

.order-first	-webkit-order: -9999; order: -9999;
.order-last	-webkit-order: 9999; order: 9999;
.order-none	-webkit-order: 0; order: 0;
.order-1	-webkit-order: 1; order: 1;
.order-2	-webkit-order: 2; order: 2;
.order-3	-webkit-order: 3; order: 3;
.order-4	-webkit-order: 4; order: 4;
.order-5	-webkit-order: 5; order: 5;
.order-6	-webkit-order: 6; order: 6;

Interactivity

Cursor

Changes the cursor when hovering over an element.

.cursor-pointer

cursor: pointer;

Extras

Power Utilities

Power utilities are powerful preset classes.

.img-scroller	The img-scroller class has a smooth hover-scroll effect and is designed for div's background-images.
.two-buttons-set	The two-buttons-set class includes a preset layout, a margin with responsiveness and it is for the two-buttons parent div. (Margin between two-buttons may vary depending on the design kit)
.blogzine	Get blogzine typography for single blog post template.

Grid column Utilities

Pre-made grid utility classes define columns for grid layout.

.grid-60-40	display: grid; grid-template-columns: 3fr 2fr;
.grid-40-60	display: grid; grid-template-columns: 2fr 3fr;
.grid-33-66	display: grid; grid-template-columns: 1fr 2fr;
.grid-66-33	display: grid; grid-template-columns: 2fr 1fr;
.grid-75-25	display: grid; grid-template-columns: 3fr 1fr;
.grid-25-75	display: grid; grid-template-columns: 1fr 3fr;
.auto-grid-2	2 column responsive auto grid
.auto-grid-3	3 column responsive auto grid
.auto-grid-4	4 column responsive auto grid

Flexbox Utilities

Pre-made utility classes for Flexbox.

.horizontal	display: flex; flex-direction: row;
.horizontal-wrap	display: flex; flex-direction: row; flex-wrap: wrap;
.vertical	display: flex; flex-direction: column;
.centered	align-items: center; align-content: center; justify-content: center; text-align: center;

Section Padding Utilities

Section top & bottom padding classes.

.section-pt-0	No padding on section top.
.section-pt-sm	Half padding on section top.
.section-pb-0	No padding on section bottom.
.section-pb-sm	Half padding on section bottom.
.section-py-0	No padding on section top & bottom.
.section-py-sm	Half padding on section top & bottom.

Breakout Utilities

Useful utility classes to design out of the box layouts.

.breakout-70	Breakout to 70vw on above 1168px viewport wide desktops.
.breakout-80	Breakout to 80vw on above 1168px viewport wide desktops.
.breakout-90	Breakout to 90vw on above 1168px viewport wide desktops.
.breakout-100	Breakout to 100vw on above 1168px viewport wide desktops.

Headings

Heading classes contain font size, font weight & line height CSS variables. (Fluid typography settings allow you to change values)

.h1	font-size: var(--h1); line-height: var(--lh-h1); font-weight: var(--h-font-weight);
.h2	font-size: var(--h2); line-height: var(--lh-h2); font-weight: var(--h-font-weight);
.h3	font-size: var(--h3); line-height: var(--lh-h3); font-weight: var(--h-font-weight);
.h4	font-size: var(--h4); line-height: var(--lh-h4); font-weight: var(--h-font-weight);
.h5	font-size: var(--h5); line-height: var(--lh-h5); font-weight: var(--h-font-weight);
.h6	font-size: var(--h6); line-height: var(--lh-h6); font-weight: var(--h-font-weight);

Button Sizes

Button size classes

.btn-s	small sized button, depends on the design kit
.btn-m	medium sized button, depends on the design kit
.btn-l	large sized button, depends on the design kit

Button Colors

Button color classes

.btn-primary	button with primary color, depends on the design kit
.btn-secondary	button with secondary color, depends on the design kit
.btn-white	button with white color, depends on the design kit
.btn-trans	button with trans color, depends on the design kit
.btn-primary-alt	button with primary-alt color, depends on the design kit
.btn-secondary-alt	button with secondary-alt color, depends on the design kit

Icons

Icon sizes with colors.

.icon-sm-primary	Small primary-color icon, depends on the design kit.
.icon-sm-dark	Small dark-color icon, depends on the design kit.
.icon-sm-light	Small light-color icon, depends on the design kit.
.icon-sm-paragraph	Small paragraph-color icon, depends on the design kit.
.icon-md-primary	Medium primary-color icon, depends on the design kit.
.icon-md-dark	Medium dark-color icon, depends on the design kit.
.icon-md-light	Medium light-color icon, depends on the design kit.
.icon-md-paragraph	Medium paragraph-color icon, depends on the design kit.
.icon-lg-primary	Large primary-color icon, depends on the design kit.
.icon-lg-dark	Large dark-color icon, depends on the design kit.
.icon-lg-light	Large light-color icon, depends on the design kit.
.icon-lg-tertiary	Large tertiary-color icon, depends on the design kit.
.icon-lg-secondary	Large secondary-color icon, depends on the design kit.
.icon-lg-paragraph	Large paragraph-color icon, depends on the design kit.
.icon-xl-primary	Extra large primary-color icon, depends on the design kit.
.icon-xl-dark	Extra large dark-color icon, depends on the design kit.
.icon-xl-light	Extra large light-color icon, depends on the design kit.
.icon-2xl-primary	Double extra large primary-color icon, depends on the design kit.
.icon-2xl-dark	Double extra large dark-color icon, depends on the design kit.
.icon-2xl-light	Double extra large light-color icon, depends on the design kit.
.icon-3xl-light	Triple extra large light-color icon, depends on the design kit.

Solid Icons

Solid icon sizes with colors.

.icon-solid-sm-primary	Small solid primary-color icon, depends on the design kit.
.icon-solid-sm-light	Small solid light-color icon, depends on the design kit.
.icon-solid-md-primary	Medium solid primary-color icon, depends on the design kit.
.icon-solid-md-light	Medium solid light-color icon, depends on the design kit.
.icon-solid-lg-primary	Large solid primary-color icon, depends on the design kit.
.icon-solid-lg-light	Large solid light-color icon, depends on the design kit.
.icon-solid-lg-tertiary	Large solid tertiary-color icon, depends on the design kit.
.icon-solid-lg-secondary	Large solid secondary-color icon, depends on the design kit.

Avatars

Avatar classes are made for avatar-images, it have the preset width, height, border radius, box shadow in it & it depends on the design kit.

.avatar	Normal sized avatar, depends on the design kit.
.avatar-sm	Small sized avatar, depends on the design kit.
.avatar-lg	Large sized avatar, depends on the design kit.
.avatar-xl	Extra large sized avatar, depends on the design kit.

Cards

Cards have the preset padding, width & border radius in it.

.card-tight	width: 100%; padding: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem); border-radius: depends on the design kit.	16px
.card-snug	width: 100%; padding: min(max(1.682rem, calc(1.682rem + ((1vw - 0.32rem) * 0.8975))), 2.4rem); border-radius: depends on the design kit.	24px
.card-normal	width: 100%; padding: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem); border-radius: depends on the design kit.	32px
.card-relaxed	width: 100%; padding: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem); border-radius: depends on the design kit.	48px
.card-loose	width: 100%; padding: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem); border-radius: depends on the design kit.	64px
.card-none	width: 100%; border-radius: depends on the design kit.

Spacing

Padding

Min max calc padding classes.

.p-0	padding: 0;	0px
.p-1	padding: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);	4px
.p-2	padding: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);	8px
.p-3	padding: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);	12px
.p-4	padding: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);	16px
.p-5	padding: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);	20px
.p-6	padding: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);	24px
.p-8	padding: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);	32px
.p-10	padding: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);	40px
.p-12	padding: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);	48px
.p-14	padding: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);	56px
.p-16	padding: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);	64px
.p-20	padding: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);	80px
.p-24	padding: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);	96px
.p-28	padding: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);	112px
.p-32	padding: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);	128px
.p-36	padding: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);	144px
.p-40	padding: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);	160px
.py-1	padding-top: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem); padding-bottom: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);	4px
.px-1	padding-left: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem); padding-right: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);	4px
.py-2	padding-top: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem); padding-bottom: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);	8px
.px-2	padding-left: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem); padding-right: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);	8px
.py-3	padding-top: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem); padding-bottom: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);	12px
.px-3	padding-left: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem); padding-right: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);	12px
.py-4	padding-top: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem); padding-bottom: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);	16px
.px-4	padding-left: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem); padding-right: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);	16px
.py-5	padding-top: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem); padding-bottom: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);	20px
.px-5	padding-left: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem); padding-right: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);	20px
.py-6	padding-top: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem); padding-bottom: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);	24px
.px-6	padding-left: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem); padding-right: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);	24px
.py-8	padding-top: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem); padding-bottom: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);	32px
.px-8	padding-left: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem); padding-right: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);	32px
.py-10	padding-top: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem); padding-bottom: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);	40px
.px-10	padding-left: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem); padding-right: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);	40px
.py-12	padding-top: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem); padding-bottom: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);	48px
.px-12	padding-left: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem); padding-right: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);	48px
.py-14	padding-top: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem); padding-bottom: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);	56px
.px-14	padding-left: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem); padding-right: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);	56px
.py-16	padding-top: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem); padding-bottom: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);	64px
.px-16	padding-left: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem); padding-right: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);	64px
.py-20	padding-top: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem); padding-bottom: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);	80px
.px-20	padding-left: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem); padding-right: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);	80px
.py-24	padding-top: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem); padding-bottom: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);	96px
.px-24	padding-left: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem); padding-right: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);	96px
.py-28	padding-top: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem); padding-bottom: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);	112px
.px-28	padding-left: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem); padding-right: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);	112px
.py-32	padding-top: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem); padding-bottom: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);	128px
.px-32	padding-left: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem); padding-right: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);	128px
.py-36	padding-top: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem); padding-bottom: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);	144px
.px-36	padding-left: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem); padding-right: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);	144px
.py-40	padding-top: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem); padding-bottom: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);	160px
.px-40	padding-left: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem); padding-right: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);	160px
.pt-1	padding-top: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);	4px
.pr-1	padding-right: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);	4px
.pb-1	padding-bottom: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);	4px
.pl-1	padding-left: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);	4px
.pt-2	padding-top: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);	8px
.pr-2	padding-right: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);	8px
.pb-2	padding-bottom: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);	8px
.pl-2	padding-left: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);	8px
.pt-3	padding-top: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);	12px
.pr-3	padding-right: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);	12px
.pb-3	padding-bottom: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);	12px
.pl-3	padding-left: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);	12px
.pt-4	padding-top: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);	16px
.pr-4	padding-right: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);	16px
.pb-4	padding-bottom: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);	16px
.pl-4	padding-left: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);	16px
.pt-5	padding-top: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);	20px
.pr-5	padding-right: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);	20px
.pb-5	padding-bottom: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);	20px
.pl-5	padding-left: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);	20px
.pt-6	padding-top: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);	24px
.pr-6	padding-right: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);	24px
.pb-6	padding-bottom: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);	24px
.pl-6	padding-left: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);	24px
.pt-8	padding-top: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);	32px
.pr-8	padding-right: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);	32px
.pb-8	padding-bottom: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);	32px
.pl-8	padding-left: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);	32px
.pt-12	padding-top: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);	48px
.pr-12	padding-right: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);	48px
.pb-12	padding-bottom: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);	48px
.pl-12	padding-left: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);	48px
.pt-16	padding-top: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);	64px
.pr-16	padding-right: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);	64px
.pb-16	padding-bottom: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);	64px
.pl-16	padding-left: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);	64px
.pt-20	padding-top: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);	80px
.pr-20	padding-right: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);	80px
.pb-20	padding-bottom: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);	80px
.pl-20	padding-left: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);	80px
.pt-24	padding-top: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);	96px
.pr-24	padding-right: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);	96px
.pb-24	padding-bottom: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);	96px
.pl-24	padding-left: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);	96px
.pt-28	padding-top: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);	112px
.pr-28	padding-right: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);	112px
.pb-28	padding-bottom: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);	112px
.pl-28	padding-left: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);	112px
.pt-32	padding-top: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);	128px
.pr-32	padding-right: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);	128px
.pb-32	padding-bottom: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);	128px
.pl-32	padding-left: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);	128px
.pt-36	padding-top: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);	144px
.pr-36	padding-right: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);	144px
.pb-36	padding-bottom: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);	144px
.pl-36	padding-left: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);	144px
.pt-40	padding-top: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);	160px
.pr-40	padding-right: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);	160px
.pb-40	padding-bottom: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);	160px
.pl-40	padding-left: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);	160px

Margin

Min max calc margin classes.

.my-auto	margin-top: auto; margin-bottom: auto;
.mx-auto	none	margin-left: auto; margin-right: auto;
.mt-auto	margin-top: auto;
.mr-auto	margin-right: auto;
.mb-auto	margin-bottom: auto;
.ml-auto	margin-left: auto;
.mt-0	margin-top: 0;	0px
.mr-0	margin-right: 0;	0px
.mb-0	margin-bottom: 0;	0px
.ml-0	margin-left: 0;	0px
.mt-1	margin-top: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);	4px
.mr-1	margin-right: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);	4px
.mb-1	margin-bottom: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);	4px
.ml-1	margin-left: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);	4px
.mt-2	margin-top: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);	8px
.mr-2	margin-right: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);	8px
.mb-2	margin-bottom: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);	8px
.ml-2	margin-left: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);	8px
.mt-3	margin-top: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);	12px
.mr-3	margin-right: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);	12px
.mb-3	margin-bottom: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);	12px
.ml-3	margin-left: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);	12px
.mt-4	margin-top: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);	16px
.mr-4	margin-right: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);	16px
.mb-4	margin-bottom: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);	16px
.ml-4	margin-left: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);	16px
.mt-5	margin-top: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);	20px
.mr-5	margin-right: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);	20px
.mb-5	margin-bottom: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);	20px
.ml-5	margin-left: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);	20px
.mt-6	margin-top: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);
.mr-6	margin-right: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);	24px
.mb-6	margin-bottom: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);	24px
.ml-6	margin-left: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);	24px
.mt-8	margin-top: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);	32px
.mr-8	margin-right: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);	32px
.mb-8	margin-bottom: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);	32px
.ml-8	margin-left: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);	32px
.mt-10	margin-top: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);	40px
.mr-10	margin-right: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);	40px
.mb-10	margin-bottom: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);	40px
.ml-10	margin-left: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);	40px
.mt-12	margin-top: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);	48px
.mr-12	margin-right: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);	48px
.mb-12	margin-bottom: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);	48px
.ml-12	margin-left: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);	48px
.mt-14	margin-top: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);	56px
.mr-14	margin-right: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);	56px
.mb-14	margin-bottom: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);	56px
.ml-14	margin-left: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);	56px
.mt-16	margin-top: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);	64px
.mr-16	margin-right: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);	64px
.mb-16	margin-bottom: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);	64px
.ml-16	margin-left: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);	64px
.mt-20	margin-top: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);	80px
.mr-20	margin-right: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);	80px
.mb-20	margin-bottom: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);	80px
.ml-20	margin-left: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);	80px
.mt-24	margin-top: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);	96px
.mr-24	margin-right: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);	96px
.mb-24	margin-bottom: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);	96px
.ml-24	margin-left: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);	96px
.mt-28	margin-top: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);	112px
.mr-28	margin-right: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);	112px
.mb-28	margin-bottom: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);	112px
.ml-28	margin-left: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);	112px
.mt-32	margin-top: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);	128px
.mr-32	margin-right: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);	128px
.mb-32	margin-bottom: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);	128px
.ml-32	margin-left: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);	128px
.mt-36	margin-top: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);	144px
.mr-36	margin-right: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);	144px
.mb-36	margin-bottom: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);	144px
.ml-36	margin-left: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);	144px
.mt-40	margin-top: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);	160px
.mr-40	margin-right: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);	160px
.mb-40	margin-bottom: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);	160px
.ml-40	margin-left: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);	160px

Space Between

Sets left or top (x or y) margin between child elements, but skips the first element.

.space-x-0	margin-left: 0;	0px
.space-x-1	margin-left: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);	4px
.space-x-2	margin-left: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);	8px
.space-x-3	margin-left: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);	12px
.space-x-4	margin-left: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);	16px
.space-x-6	margin-left: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);	24px
.space-x-8	margin-left: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);	32px
.space-x-10	margin-left: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.5))), 4rem);	40px
.space-x-12	margin-left: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);	48px
.space-x-14	margin-left: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2.1))), 5.6rem);	56px
.space-x-16	margin-left: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);	64px
.space-x-20	margin-left: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);	80px
.space-y-0	margin-top: 0;	0px
.space-y-1	margin-top: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);	4px
.space-y-2	margin-top: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);	8px
.space-y-3	margin-top: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);	12px
.space-y-4	margin-top: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);	16px
.space-y-6	margin-top: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);	24px
.space-y-8	margin-top: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);	32px
.space-y-10	margin-top: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.5))), 4rem);	40px
.space-y-12	margin-top: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);	48px
.space-y-14	margin-top: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2.1))), 5.6rem);	56px
.space-y-16	margin-top: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);	64px
.space-y-20	margin-top: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);	80px

Box Alignment

Justify Content

Utilities for controlling how flex and grid items are positioned along a container's main axis.

.justify-start	display: flex; justify-content: flex-start;
.justify-center	display: flex; justify-content: center;
.justify-end	display: flex; justify-content: flex-end;
.justify-between	display: flex; justify-content: space-between;

Align Content

Utilities for controlling how rows are positioned in multi-row flex and grid containers.

.content-center	align-content: center;
.content-between	align-content: space-between;
.content-around	align-content: space-around;

Align Items

Sets flex items position along a contrainer's cross axis.

.items-stretch	align-items: stretch;
.items-start	align-items: flex-start;
.items-center	align-items: center;
.items-end	align-items: flex-end;
.items-baseline	align-items: baseline;

Align Self

Controls how an individual flex item is positioned along container's cross axis.

.self-start	align-self: flex-start;
.self-end	align-self: flex-end;
.self-center	align-self: center;
.self-stretch	align-self: stretch;

Grid

Grid Template Columns

Defines columns for grid layout.

.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-none	grid-template-columns: none;

Grid Column, start/end

Sets a grid item size and location within the grid column.

.col-auto	grid-column: auto;
.col-span-1	grid-column: span 1 / span 1;
.col-span-2	grid-column: span 2 / span 2;
.col-span-3	grid-column: span 3 / span 3;
.col-span-4	grid-column: span 4 / span 4;
.col-span-5	grid-column: span 5 / span 5;
.col-span-6	grid-column: span 6 / span 6;
.col-start-1	grid-column-start: 1;
.col-start-2	grid-column-start: 2;
.col-start-3	grid-column-start: 3;
.col-start-4	grid-column-start: 4;
.col-start-5	grid-column-start: 5;
.col-start-6	grid-column-start: 6;
.col-start-7	grid-column-start: 7;
.col-start-auto	grid-column-start: auto;
.col-end-1	grid-column-end: 1;
.col-end-2	grid-column-end: 2;
.col-end-3	grid-column-end: 3;
.col-end-4	grid-column-end: 4;
.col-end-5	grid-column-end: 5;
.col-end-6	grid-column-end: 6;
.col-end-7	grid-column-end: 7;
.col-end-auto	grid-column-end: auto;

Grid Template Rows

Defines rows for grid layout.

.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-none	grid-template-rows: none;

Grid Row, start/end

Sets a grid item size and location within the grid row.

.row-auto	grid-row: auto;
.row-span-1	grid-row: span 1 / span 1;
.row-span-2	grid-row: span 2 / span 2;
.row-span-3	grid-row: span 3 / span 3;
.row-start-1	grid-row-start: 1;
.row-start-2	grid-row-start: 2;
.row-start-3	grid-row-start: 3;
.row-start-4	grid-row-start: 4;
.row-start-auto	grid-row-start: auto;
.row-end-1	grid-row-end: 1;
.row-end-2	grid-row-end: 2;
.row-end-3	grid-row-end: 3;
.row-end-4	grid-row-end: 4;
.row-end-auto	grid-row-end: auto;

Grid Auto Flow

Controls the auto placement of grid elements.

.grid-flow-row	grid-auto-flow: row;
.grid-flow-col	grid-auto-flow: column;
.grid-flow-row-dense	grid-auto-flow: row dense;
.grid-flow-col-dense	grid-auto-flow: column dense;

Gap

Sets the gaps (gutters) between rows and columns.

.gap-px	gap: 1px;	1px
.gap-2	gap: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.2857))), 0.8rem);	2px
.gap-4	gap: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.5714))), 1.6rem);	16px
.gap-6	gap: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.8571))), 2.4rem);	24px
.gap-8	gap: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.1429))), 3.2rem);	32px
.gap-10	gap: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);	40px
.gap-12	gap: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.7143))), 4.8rem);	48px
.gap-14	gap: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);	56px
.gap-16	gap: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.2857))), 6.4rem);	64px
.gap-20	gap: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 2.8571))), 8rem);	80px
.gap-24	gap: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.4286))), 9.6rem);	96px
.col-gap-0	column-gap: 0rem;	0px
.col-gap-2	column-gap: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.2857))), 0.8rem);	2px
.col-gap-4	column-gap: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.5714))), 1.6rem);	16px
.col-gap-6	column-gap: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.8571))), 2.4rem);	24px
.col-gap-8	column-gap: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.1429))), 3.2rem);	32px
.col-gap-10	column-gap: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);	40px
.col-gap-12	column-gap: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.7143))), 4.8rem);	48px
.col-gap-14	column-gap: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);	56px
.col-gap-16	column-gap: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.2857))), 6.4rem);	64px
.col-gap-20	column-gap: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 2.8571))), 8rem);	80px
.col-gap-24	column-gap: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.4286))), 9.6rem);	96px
.row-gap-0	row-gap: 0rem;	0px
.row-gap-2	row-gap: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.2857))), 0.8rem);	2px
.row-gap-4	row-gap: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.5714))), 1.6rem);	16px
.row-gap-6	row-gap: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.8571))), 2.4rem);	24px
.row-gap-8	row-gap: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.1429))), 3.2rem);	32px
.row-gap-10	row-gap: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);	40px
.row-gap-12	row-gap: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.7143))), 4.8rem);	48px
.row-gap-14	row-gap: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);	56px
.row-gap-16	row-gap: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.2857))), 6.4rem);	64px
.row-gap-20	row-gap: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 2.8571))), 8rem);	80px
.row-gap-24	row-gap: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.4286))), 9.6rem);	96px

Hover Styles

Hover Colors

Hover colors to work with a few hover effects.

.hover-color-dark
.hover-color-light
.hover-color-primary
.hover-color-paragraph
.hover-color-paragraph-alt

Hover Background Colors

Hover background colors to work with a few hover effects.

.hover-bg-primary
.hover-bg-secondary
.hover-bg
.hover-bg-dark
.hover-bg-light
.hover-bg-alt
.hover-bg-white
.hover-bg-black
.hover-bg-placeholder
.hover-bg-placeholder-alt

Hover Border Colors

Hover border colors to work with a few hover effects.

.hover-border-primary
.hover-border-secondary
.hover-border-dark
.hover-border-light
.hover-border
.hover-border-alt

3D Hover Animations

3d hover animations, that work out of the box.

.hover-3d-basic	Use OxyMade hover effects panel to add this class.
.hover-3d-cloud-right	Use OxyMade hover effects panel to add this class.
.hover-3d-cloud-left	Use OxyMade hover effects panel to add this class.
.hover-3d-slate-top	Use OxyMade hover effects panel to add this class.
.hover-3d-slate-right	Use OxyMade hover effects panel to add this class.
.hover-3d-zoom-top	Use OxyMade hover effects panel to add this class.
.hover-3d-zoom-right	Use OxyMade hover effects panel to add this class.
.hover-3d-wakeup	Use OxyMade hover effects panel to add this class.
.hover-3d-dance	Use OxyMade hover effects panel to add this class.

Hover Transitions

Hover effects to work with Oxygen.

.hover-overline-from-left	Use OxyMade hover effects panel to add this class.
.hover-overline-from-center	Use OxyMade hover effects panel to add this class.
.hover-reveal	Use OxyMade hover effects panel to add this class.
.hover-underline-reveal	Use OxyMade hover effects panel to add this class.
.hover-overline-reveal	Use OxyMade hover effects panel to add this class.
.hover-glow	Use OxyMade hover effects panel to add this class.
.hover-shadow	Use OxyMade hover effects panel to add this class.
.hover-grow-shadow	Use OxyMade hover effects panel to add this class.
.hover-box-shadow-outset	Use OxyMade hover effects panel to add this class.
.hover-float-shadow	Use OxyMade hover effects panel to add this class.
.hover-bubble-top	Use OxyMade hover effects panel to add this class.
.hover-bubble-right	Use OxyMade hover effects panel to add this class.
.hover-bubble-bottom	Use OxyMade hover effects panel to add this class.
.hover-bubble-left	Use OxyMade hover effects panel to add this class.
.hover-grow	Use OxyMade hover effects panel to add this class.
.hover-shrink	Use OxyMade hover effects panel to add this class.
.hover-grow-rotate	Use OxyMade hover effects panel to add this class.
.hover-float	Use OxyMade hover effects panel to add this class.
.hover-skew	Use OxyMade hover effects panel to add this class.
.hover-buzz-out	Use OxyMade hover effects panel to add this class.
.hover-forward	Use OxyMade hover effects panel to add this class.
.hover-fade	Use OxyMade hover effects panel to add this class.
.hover-back-pulse	Use OxyMade hover effects panel to add this class.
.hover-bounce-to-right	Use OxyMade hover effects panel to add this class.
.hover-bounce-to-bottom	Use OxyMade hover effects panel to add this class.
.hover-shutter-out-horizontal	Use OxyMade hover effects panel to add this class.
.hover-hollow	Use OxyMade hover effects panel to add this class.
.hover-trim	Use OxyMade hover effects panel to add this class.
.hover-ripple-out	Use OxyMade hover effects panel to add this class.
.hover-outline-out	Use OxyMade hover effects panel to add this class.
.hover-round-corners	Use OxyMade hover effects panel to add this class.
.hover-underline-from-left	Use OxyMade hover effects panel to add this class.
.hover-underline-from-center	Use OxyMade hover effects panel to add this class.

Backgrounds

Background Color

Sets background color.

.bg	background-color: var(--background-color);
.bg-alt	background-color: var(--background-alt-color);
.bg-primary	background-color: var(--primary-color);
.bg-secondary	background-color: var(--secondary-color);
.bg-primary-hover	background-color: var(--primary-hover-color);
.bg-secondary-hover	background-color: var(--secondary-hover-color);
.bg-primary-alt	background-color: var(--primary-alt-color);
.bg-secondary-alt	background-color: var(--secondary-alt-color);
.bg-primary-alt-hover	background-color: var(--primary-alt-hover-color);
.bg-secondary-alt-hover	background-color: var(--secondary-alt-hover-color);
.bg-tertiary	background-color: var(--tertiary-color);
.bg-white	background-color: var(--white-color);
.bg-black	background-color: var(--black-color);
.bg-placeholder	background-color: var(--placeholder-color);
.bg-placeholder-alt	background-color: var(--placeholder-alt-color);

Background Overlay Color

Sets background overlay color.

.overlay-primary	Background primary overlay color with 0.70 opacity.
.overlay-secondary	Background secondary overlay color with 0.70 opacity.
.overlay-tertiary	Background tertiary overlay color with 0.70 opacity.
.overlay-dark	Background dark overlay color with 0.70 opacity.
.overlay-paragraph	Background paragraph overlay color with 0.70 opacity.
.overlay-black	Background black overlay color with 0.70 opacity.
.overlay-success	Background success overlay color with 0.70 opacity.
.overlay-warning	Background warning overlay color with 0.70 opacity.
.overlay-error	Background error overlay color with 0.70 opacity.
.overlay-extra-1	Background extra-1 overlay color with 0.70 opacity.
.overlay-extra-2	Background extra-2 overlay color with 0.70 opacity.
.overlay-extra-3	Background extra-3 overlay color with 0.70 opacity.
.overlay-extra-4	Background extra-4 overlay color with 0.70 opacity.

Background Position

Sets position of a background image.

.bg-center

background-position: center;

Background Size

Sets background size of a background image.

.bg-cover

background-size: cover;

Sizing

Width

Sets the width of an element.

.w-auto	width: auto;
.w-1by2	width: 50%;
.w-1by3	width: 33.333333%;
.w-2by3	width: 66.666667%;
.w-1by4	width: 25%;
.w-2by4	width: 50%;
.w-3by4	width: 75%;
.w-1by5	width: 20%;
.w-1by6	width: 16.666667%;
.w-2by6	width: 33.333333%;
.w-3by6	width: 50%;
.w-4by6	width: 66.666667%;
.w-5by6	width: 83.333333%;
.w-10p	width: 10%;
.w-full	width: 100%;
.w-screen	width: 100vw;

Max Width

Sets the maxiumum width of an element.

.max-w-0	max-width: 0rem;
.max-w-xs	max-width: 31.9rem;
.max-w-sm	max-width: 47.9rem;
.max-w-md	max-width: 76.7rem;
.max-w-lg	max-width: 99.1rem;
.max-w-xl	max-width: 111.9rem;
.max-w-full	max-width: 100%;
.max-w-prose	max-width: 65ch;

Height

Sets the height of an element.

.h-auto	height: auto;
.h-full	height: 100%;
.h-screen	height: 100vh;

Effects

Box Shadow

Sets the shadow around an element.

.shadow-xs	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
.shadow-sm	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
.shadow	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
.shadow-md	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
.shadow-lg	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
.shadow-xl	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
.shadow-2xl	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
.shadow-inner	box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
.shadow-none	box-shadow: 0 0 #0000;

Opacity

.opacity-0	opacity: 0;
.opacity-25	opacity: 0.25;
.opacity-50	opacity: 0.5;
.opacity-75	opacity: 0.75;
.opacity-100	opacity: 1;
.hover-opacity-0	opacity: 0;
.hover-opacity-25	opacity: 0.25;
.hover-opacity-50	opacity: 0.5;
.hover-opacity-75	opacity: 0.75;
.hover-opacity-100	opacity: 1;

Typography

Text Color

Sets the text color.

.color-primary	color: var(--primary-color);
.color-secondary	color: var(--secondary-color);
.color-primary-alt	color: var(--primary-alt-color);
.color-secondary-alt	color: var(--secondary-alt-color);
.color-tertiary	color: var(--tertiary-color);
.color-dark	color: var(--dark-color);
.color-light	color: var(--light-color);
.color-paragraph	color: var(--paragraph-color);
.color-paragraph-alt	color: var(--paragraph-alt-color);
.color-black	color: var(--black-color);
.color-white	color: var(--white-color);

.text-xs	font-size: var(--text-xs); line-height: var(--lh-xs);
.text-sm	font-size: var(--text-sm); line-height: var(--lh-sm);
.text-base	font-size: var(--text-base); line-height: var(--lh-base);
.text-lg	font-size: var(--text-lg); line-height: var(--lh-lg);
.text-xl	font-size: var(--text-xl); line-height: var(--lh-xl);
.text-2xl	font-size: var(--text-2xl); line-height: var(--lh-2xl);
.text-3xl	font-size: var(--text-3xl); line-height: var(--lh-3xl);
.text-4xl	font-size: var(--text-4xl); line-height: var(--lh-4xl);
.text-5xl	font-size: var(--text-5xl); line-height: var(--lh-5xl);
.text-6xl	font-size: var(--text-6xl); line-height: var(--lh-6xl);
.text-7xl	font-size: var(--text-7xl); line-height: var(--lh-7xl);
.text-8xl	font-size: var(--text-8xl); line-height: var(--lh-8xl);
.text-9xl	font-size: var(--text-9xl); line-height: var(--lh-9xl);

Font Weight

Sets the font weight.

.font-normal	font-weight: 400;
.font-medium	font-weight: 500;
.font-semibold	font-weight: 600;
.font-bold	font-weight: 700;

Font Family

Sets the font family.

.font-headings	font-family: Display;
.font-text	font-family: Text;

Letter Spacing

Sets the spacing between letters.

.tracking-tighter	letter-spacing: -0.05rem;
.tracking-tight	letter-spacing: -0.025rem;
.tracking-wide	letter-spacing: 0.05rem;
.tracking-wider	letter-spacing: 0.1rem;

Text Align

Sets the alignment of text.

.text-left	text-align: left;
.text-center	text-align: center;
.text-right	text-align: right;

Text Decoration

Utilities for controlling the decoration of text.

.underline	text-decoration: underline;
.hover-underline	text-decoration: underline;

Text Transform

Utilities for controlling the transformation of text.

.uppercase	text-transform: uppercase;
.lowercase	text-transform: lowercase;
.capitalize	text-transform: capitalize;

Borders

Border Radius

Sets border radius.

.rounded-sm	border-radius: 0.2rem;	2px
.rounded	border-radius: 0.4rem;	4px
.rounded-md	border-radius: 0.6rem;	6px
.rounded-lg	border-radius: 0.8rem;	8px
.rounded-xl	border-radius: 1.6rem;	10px
.rounded-full	border-radius: 999.901rem;
.rounded-t-sm	border-top-left-radius: 0.2rem; border-top-right-radius: 0.2rem;	2px
.rounded-r-sm	border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem;	2px
.rounded-b-sm	border-bottom-right-radius: 0.2rem; border-bottom-left-radius: 0.2rem;	2px
.rounded-l-sm	border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem;	2px
.rounded-t	border-top-left-radius: 0.4rem; border-top-right-radius: 0.4rem;	4px
.rounded-r	border-top-right-radius: 0.4rem; border-bottom-right-radius: 0.4rem;	4px
.rounded-b	border-bottom-right-radius: 0.4rem; border-bottom-left-radius: 0.4rem;	4px
.rounded-l	border-top-left-radius: 0.4rem; border-bottom-left-radius: 0.4rem;	4px
.rounded-t-md	border-top-left-radius: 0.6rem; border-top-right-radius: 0.6rem;	6px
.rounded-r-md	border-top-right-radius: 0.6rem; border-bottom-right-radius: 0.6rem;	6px
.rounded-b-md	border-bottom-right-radius: 0.6rem; border-bottom-left-radius: 0.6rem;	6px
.rounded-l-md	border-top-left-radius: 0.6rem; border-bottom-left-radius: 0.6rem;	6px
.rounded-t-lg	border-top-left-radius: 0.8rem; border-top-right-radius: 0.8rem;	8px
.rounded-r-lg	border-top-right-radius: 0.8rem; border-bottom-right-radius: 0.8rem;	8px
.rounded-b-lg	border-bottom-right-radius: 0.8rem; border-bottom-left-radius: 0.8rem;	8px
.rounded-l-lg	border-top-left-radius: 0.8rem; border-bottom-left-radius: 0.8rem;	8px

Border Width

Sets width for borders.

.border-none	border-width: 0; border-style: solid;
.border-px	border-width: 1px border-style: solid;
.border-2	border-width: 2px border-style: solid;
.border-t	border-top-width: 1px border-style: solid;
.border-r	border-right-width: 1px border-style: solid;
.border-b	border-bottom-width: 1px border-style: solid;
.border-l	border-left-width: 1px border-style: solid;

Border Color

Sets color for borders.

	.border-color	border-color: var(--border-color);
	.border-color-alt	border-color: var(--border-alt-color);
	.border-color-primary	border-color: var(--primary-color);
	.border-color-secondary	border-color: var(--secondary-color);
	.border-color-tertiary	border-color: var(--tertiary-color);

Divide Width

.divide-x	border-left-width: 1px;
.divide-y	border-top-width: 1px;

Filters

Blur

Utilities for applying blur filters to an element.

.blur-sm	blur: blur(4px);
.blur	blur: blur(8px);
.blur-md	blur: blur(12px);
.blur-lg	blur: blur(16px);
.blur-xl	blur: blur(24px);

XL:Layout

XL:Display

Sets the display box type of an element.

.xl-hidden	display: none;
.xl-flex	display: flex;

XL:Position

Sets an element's position.

.xl-sticky-off

position: static;

XL:Grid

XL:Grid Template Columns

Defines columns for grid layout.

.xl-grid-cols-1	grid-template-columns: repeat(1, minmax(0, 1fr));
.xl-grid-cols-2	grid-template-columns: repeat(2, minmax(0, 1fr));
.xl-grid-cols-3	grid-template-columns: repeat(3, minmax(0, 1fr));
.xl-grid-cols-4	grid-template-columns: repeat(4, minmax(0, 1fr));
.xl-grid-cols-5	grid-template-columns: repeat(5, minmax(0, 1fr));
.xl-grid-cols-none	grid-template-columns: none;

XL:Grid Column, start/end

Sets a grid item size and location within the grid column.

.xl-col-auto	grid-column: auto;
.xl-col-span-1	grid-column: span 1 / span 1;
.xl-col-span-2	grid-column: span 2 / span 2;
.xl-col-span-3	grid-column: span 3 / span 3;
.xl-col-span-4	grid-column: span 4 / span 4;
.xl-col-span-5	grid-column: span 5 / span 5;
.xl-col-start-1	grid-column-start: 1;
.xl-col-start-2	grid-column-start: 2;
.xl-col-start-3	grid-column-start: 3;
.xl-col-start-4	grid-column-start: 4;
.xl-col-start-5	grid-column-start: 5;
.xl-col-start-6	grid-column-start: 6;
.xl-col-start-auto	grid-column-start: auto;
.xl-col-end-1	grid-column-end: 1;
.xl-col-end-2	grid-column-end: 2;
.xl-col-end-3	grid-column-end: 3;
.xl-col-end-4	grid-column-end: 4;
.xl-col-end-5	grid-column-end: 5;
.xl-col-end-6	grid-column-end: 6;
.xl-col-end-auto	grid-column-end: auto;

XL:Grid Row, start/end

Sets a grid item size and location within the grid row.

.xl-row-span-1	grid-row: span 1 / span 1;
.xl-row-span-2	grid-row: span 2 / span 2;
.xl-row-span-3	grid-row: span 3 / span 3;

XL:Spacing

XL:Margin

Min max calc margin classes.

.xl-mx-auto

margin-left: auto; margin-right: auto;

XL:Extras

XL:Flexbox Utilities

Pre-made utility classes for Flexbox.

.xl-horizontal	display: flex; flex-direction: row;
.xl-horizontal-wrap	display: flex; flex-direction: row; flex-wrap: wrap;
.xl-vertical	display: flex; flex-direction: column;
.xl-centered	align-items: center; align-content: center; justify-content: center; text-align: center;

XL:Breakout Utilities

Useful utility classes to design out of the box layouts.

.xl-breakout

width:100vw; max-width:100vw; margin-top:0px; margin-bottom:0px; margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%);

XL:Flexbox

XL:Display

Sets element to be a flex container.

.xl-flex

display: flex;

XL:Sizing

XL:Width

Sets the width of an element.

.xl-w-1by2	width: 50%;
.xl-w-1by3	width: 33.333333%;
.xl-w-2by3	width: 66.666667%;
.xl-w-1by4	width: 25%;
.xl-w-2by4	width: 50%;
.xl-w-3by4	width: 75%;
.xl-w-full	width: 100%;

XL:Height

Sets the height of an element.

.xl-h-full	height: 100%;
.xl-h-screen	height: 100vh;

MD:Layout

MD:Display

Sets the display box type of an element.

.md-hidden	display: none;
.md-flex	display: flex;

MD:Position

Sets an element's position.

.md-sticky-off

position: static;

MD:Borders

MD:Border Radius

Sets border radius.

.md-rounded-sm	border-radius: 0.2rem;	2px
.md-rounded	border-radius: 0.4rem;	4px
.md-rounded-md	border-radius: 0.6rem;	6px
.md-rounded-lg	border-radius: 0.8rem;	8px

MD:Spacing

MD:Margin

Min max calc margin classes.

.md-mx-auto	margin-left: auto; margin-right: auto;
.md-mr-auto	margin-right: auto;
.md-ml-auto	margin-left: auto;
.md-mr-0	margin-right: 0;
.md-mb-0	margin-bottom: 0;

MD:Grid

MD:Grid Template Columns

Defines columns for grid layout.

.md-grid-cols-1	grid-template-columns: repeat(1, minmax(0, 1fr));
.md-grid-cols-2	grid-template-columns: repeat(2, minmax(0, 1fr));
.md-grid-cols-3	grid-template-columns: repeat(3, minmax(0, 1fr));
.md-grid-cols-4	grid-template-columns: repeat(4, minmax(0, 1fr));
.md-grid-cols-none	grid-template-columns: none;

MD:Grid Column, start/end

Sets a grid item size and location within the grid column.

.md-col-auto	grid-column: auto;
.md-col-span-1	grid-column: span 1 / span 1;
.md-col-span-2	grid-column: span 2 / span 2;
.md-col-span-3	grid-column: span 3 / span 3;
.md-col-span-4	grid-column: span 4 / span 4;
.md-col-start-1	grid-column-start: 1;
.md-col-start-2	grid-column-start: 2;
.md-col-start-3	grid-column-start: 3;
.md-col-start-4	grid-column-start: 4;
.md-col-start-5	grid-column-start: 5;
.md-col-start-auto	grid-column-start: auto;
.md-col-end-1	grid-column-end: 1;
.md-col-end-2	grid-column-end: 2;
.md-col-end-3	grid-column-end: 3;
.md-col-end-4	grid-column-end: 4;
.md-col-end-5	grid-column-end: 5;
.md-col-end-auto	grid-column-end: auto;

MD:Grid Row, start/end

Sets a grid item size and location within the grid row.

.md-row-span-1	grid-row: span 1 / span 1;
.md-row-span-2	grid-row: span 2 / span 2;
.md-row-span-3	grid-row: span 3 / span 3;
.md-row-start-1	grid-row-start: 1;

MD:Flexbox

MD:Display

Sets element to be a flex container.

.md-flex

display: flex;

MD:Order

Controls how flex items are ordered.

.md-order-first	-webkit-order: -9999; order: -9999;
.md-order-last	-webkit-order: 9999; order: 9999;
.md-order-none	-webkit-order: 0; order: 0;
.md-order-1	-webkit-order: 1; order: 1;
.md-order-2	-webkit-order: 2; order: 2;
.md-order-3	-webkit-order: 3; order: 3;
.md-order-4	-webkit-order: 4; order: 4;
.md-order-5	-webkit-order: 5; order: 5;
.md-order-6	-webkit-order: 6; order: 6;

MD:Extras

MD:Flexbox Utilities

Pre-made utility classes for Flexbox.

.md-horizontal	display: flex; flex-direction: row;
.md-horizontal-wrap	display: flex; flex-direction: row; flex-wrap: wrap;
.md-horizontal-reverse	display: flex; flex-direction: row-reverse;
.md-vertical	display: flex; flex-direction: column;
.md-vertical-reverse	display: flex; flex-direction: column-reverse;
.md-centered	align-items: center; align-content: center; justify-content: center; text-align: center;

MD:Breakout Utilities

Useful utility classes to design out of the box layouts.

.md-breakout

width:100vw; max-width:100vw; margin-top:0px; margin-bottom:0px; margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%);

MD:Sizing

MD:Width

Sets the width of an element.

.md-w-1by2	width: 50%;
.md-w-1by3	width: 33.333333%;
.md-w-2by3	width: 66.666667%;
.md-w-full	width: 100%;

MD:Height

Sets the height of an element.

.md-h-full	height: 100%;
.md-h-screen	height: 100vh;

LG:Layout

LG:Display

Sets the display box type of an element.

.lg-hidden	display: none;
.lg-flex	display: flex;

LG:Position

Sets an element's position.

.lg-sticky-off

position: static;

LG:Grid

LG:Grid Template Columns

Defines columns for grid layout.

.lg-grid-cols-1	grid-template-columns: repeat(1, minmax(0, 1fr));
.lg-grid-cols-2	grid-template-columns: repeat(2, minmax(0, 1fr));
.lg-grid-cols-3	grid-template-columns: repeat(3, minmax(0, 1fr));
.lg-grid-cols-4	grid-template-columns: repeat(4, minmax(0, 1fr));
.lg-grid-cols-none	grid-template-columns: none;

LG:Grid Column, start/end

Sets a grid item size and location within the grid column.

.lg-col-auto	grid-column: auto;
.lg-col-span-1	grid-column: span 1 / span 1;
.lg-col-span-2	grid-column: span 2 / span 2;
.lg-col-span-3	grid-column: span 3 / span 3;
.lg-col-span-4	grid-column: span 4 / span 4;
.lg-col-start-1	grid-column-start: 1;
.lg-col-start-2	grid-column-start: 2;
.lg-col-start-3	grid-column-start: 3;
.lg-col-start-4	grid-column-start: 4;
.lg-col-start-5	grid-column-start: 5;
.lg-col-start-auto	grid-column-start: auto;
.lg-col-end-1	grid-column-end: 1;
.lg-col-end-2	grid-column-end: 2;
.lg-col-end-3	grid-column-end: 3;
.lg-col-end-4	grid-column-end: 4;
.lg-col-end-5	grid-column-end: 5;
.lg-col-end-auto	grid-column-end: auto;

LG:Grid Row, start/end

Sets a grid item size and location within the grid row.

.lg-row-span-1	grid-row: span 1 / span 1;
.lg-row-span-2	grid-row: span 2 / span 2;
.lg-row-span-3	grid-row: span 3 / span 3;
.lg-row-start-1	grid-row-start: 1;

LG:Spacing

LG:Margin

Min max calc margin classes.

.lg-mx-auto	margin-left: auto; margin-right: auto;
.lg-mr-0	margin-right: 0;

LG:Extras

LG:Flexbox Utilities

Pre-made utility classes for Flexbox.

.lg-horizontal	display: flex; flex-direction: row;
.lg-horizontal-wrap	display: flex; flex-direction: row; flex-wrap: wrap;
.lg-horizontal-reverse	display: flex; flex-direction: row-reverse;
.lg-vertical	display: flex; flex-direction: column;
.lg-vertical-reverse	display: flex; flex-direction: column-reverse;
.lg-centered	align-items: center; align-content: center; justify-content: center; text-align: center;

LG:Breakout Utilities

Useful utility classes to design out of the box layouts.

.lg-breakout

width:100vw; max-width:100vw; margin-top:0px; margin-bottom:0px; margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%);

LG:Flexbox

LG:Display

Sets element to be a flex container.

.lg-flex

display: flex;

LG:Order

Controls how flex items are ordered.

.lg-order-first	-webkit-order: -9999; order: -9999;
.lg-order-last	-webkit-order: 9999; order: 9999;
.lg-order-none	-webkit-order: 0; order: 0;
.lg-order-1	-webkit-order: 1; order: 1;
.lg-order-2	-webkit-order: 2; order: 2;
.lg-order-3	-webkit-order: 3; order: 3;
.lg-order-4	-webkit-order: 4; order: 4;
.lg-order-5	-webkit-order: 5; order: 5;
.lg-order-6	-webkit-order: 6; order: 6;

LG:Sizing

LG:Width

Sets the width of an element.

.lg-w-1by2	width: 50%;
.lg-w-1by3	width: 33.333333%;
.lg-w-2by3	width: 66.666667%;
.lg-w-1by4	width: 25%;
.lg-w-2by4	width: 50%;
.lg-w-3by4	width: 75%;
.lg-w-full	width: 100%;

LG:Height

Sets the height of an element.

.lg-h-full	height: 100%;
.lg-h-screen	height: 100vh;

SM:Layout

SM:Display

Sets the display box type of an element.

.sm-hidden	display: none;
.sm-flex	display: flex;

SM:Position

Sets an element's position.

.sm-sticky-off

position: static;

SM:Grid

SM:Grid Template Columns

Defines columns for grid layout.

.sm-grid-cols-1	grid-template-columns: repeat(1, minmax(0, 1fr));
.sm-grid-cols-2	grid-template-columns: repeat(2, minmax(0, 1fr));
.sm-grid-cols-3	grid-template-columns: repeat(3, minmax(0, 1fr));
.sm-grid-cols-none	grid-template-columns: none;

SM:Grid Column, start/end

Sets a grid item size and location within the grid column.

.sm-col-auto	grid-column: auto;
.sm-col-span-1	grid-column: span 1 / span 1;
.sm-col-span-2	grid-column: span 2 / span 2;
.sm-col-span-3	grid-column: span 3 / span 3;
.sm-col-start-1	grid-column-start: 1;
.sm-col-start-2	grid-column-start: 2;
.sm-col-start-3	grid-column-start: 3;
.sm-col-start-4	grid-column-start: 4;
.sm-col-start-auto	grid-column-start: auto;
.sm-col-end-1	grid-column-end: 1;
.sm-col-end-2	grid-column-end: 2;
.sm-col-end-3	grid-column-end: 3;
.sm-col-end-4	grid-column-end: 4;
.sm-col-end-auto	grid-column-end: auto;

SM:Grid Row, start/end

Sets a grid item size and location within the grid row.

.sm-row-span-1	grid-row: span 1 / span 1;
.sm-row-span-2	grid-row: span 2 / span 2;
.sm-row-span-3	grid-row: span 3 / span 3;

SM:Spacing

SM:Margin

Min max calc margin classes.

.sm-mx-auto	margin-left: auto; margin-right: auto;
.sm-mr-auto	margin-right: auto;
.sm-ml-auto	margin-left: auto;
.sm-mt-0	margin-top: 0;
.sm-mr-0	margin-right: 0;

SM:Extras

SM:Flexbox Utilities

Pre-made utility classes for Flexbox.

.sm-horizontal	display: flex; flex-direction: row;
.sm-horizontal-wrap	display: flex; flex-direction: row; flex-wrap: wrap;
.sm-horizontal-reverse	display: flex; flex-direction: row-reverse;
.sm-vertical	display: flex; flex-direction: column;
.sm-vertical-reverse	display: flex; flex-direction: column-reverse;
.sm-centered	align-items: center; align-content: center; justify-content: center; text-align: center;

SM:Breakout Utilities

Useful utility classes to design out of the box layouts.

.sm-breakout

width:100vw; max-width:100vw; margin-top:0px; margin-bottom:0px; margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%);

SM:Flexbox

SM:Display

Sets element to be a flex container.

.sm-flex

display: flex;

SM:Order

Controls how flex items are ordered.

.sm-order-first	-webkit-order: -9999; order: -9999;
.sm-order-last	-webkit-order: 9999; order: 9999;
.sm-order-none	-webkit-order: 0; order: 0;
.sm-order-1	-webkit-order: 1; order: 1;
.sm-order-2	-webkit-order: 2; order: 2;
.sm-order-3	-webkit-order: 3; order: 3;
.sm-order-4	-webkit-order: 4; order: 4;
.sm-order-5	-webkit-order: 5; order: 5;
.sm-order-6	-webkit-order: 6; order: 6;

SM:Sizing

SM:Width

Sets the width of an element.

.sm-w-1by2	width: 50%;
.sm-w-full	width: 100%;

SM:Height

Sets the height of an element.

.sm-h-full	height: 100%;
.sm-h-screen	height: 100vh;

Cheatsheet 1.5.9

Layout

Display

Object Fit

Object Position

Overflow

Position

Z-index

Flexbox

Display

Flex Direction

Flex Wrap

Order

Interactivity

Cursor

Extras

Power Utilities

Grid column Utilities

Flexbox Utilities

Section Padding Utilities

Breakout Utilities

Headings

Button Sizes

Button Colors

Icons

Solid Icons

Avatars

Cards

Spacing

Padding

Margin

Space Between

Box Alignment

Justify Content

Align Content

Align Items

Align Self

Grid

Grid Template Columns

Grid Column, start/end

Grid Template Rows

Grid Row, start/end

Grid Auto Flow

Gap

Hover Styles

Hover Colors

Hover Background Colors

Hover Border Colors

3D Hover Animations

Hover Transitions

Backgrounds

Background Color

Background Overlay Color

Background Position

Background Size

Sizing

Width

Max Width

Height

Effects

Box Shadow

Opacity

Typography

Text Color

Font Size

Font Weight

Font Family

Letter Spacing

Text Align

Text Decoration

Text Transform

Borders

Border Radius

Border Width

Border Color

Divide Width

Filters

Blur

XL:Layout

XL:Display