Grand Central

A collection of utilities for the rapid development of responsive web applications.

Breakpoints

m
600px
// @media (min-width: 600px)
l
900px
// @media (min-width: 900px)
xl
1200px
// @media (min-width: 1200px)

Colors

Class
Properties
.current
color: currentColor
.transparent
color: transparent
.black
color: #212121
.white
color: #ffffff
.grey-200
color: #f1f1f1
.grey-300
color: #e1e1e1
.grey-400
color: #c1c1c1
.grey-500
color: #919191
.grey-600
color: #717171
.grey-700
color: #515151
.grey-800
color: #313131

Display

Class
Properties
.block
display: block;
.flex
display: flex;
.inline
display: inline;
.inline-block
display: inline-block;
.inline-flex
display: inline-flex;
.table
display: table;
.table-row
display: table-row;
.table-cell
display: table-cell;
.hidden
display: none;

Float

Class
Properties
.float-left
float: left;
.float-right
float: right;
.float-none
float: none;
.clear::after
clear: both;
content: ;
display: table;

Object Fit

Class
Properties
.object-contain
object-fit: contain;
.object-cover
object-fit: cover;
.object-fill
object-fit: fill;
.object-scale-down
object-fit: scale-down;
.object-none
object-fit: none;

Object Position

Class
Properties
.object-bottom
object-position: bottom;
.object-center
object-position: center;
.object-left
object-position: left;
.object-left-bottom
object-position: left bottom;
.object-left-top
object-position: left top;
.object-right
object-position: right;
.object-right-bottom
object-position: right bottom;
.object-right-top
object-position: right top;
.object-top
object-position: top;

Overflow

Class
Properties
.overflow-auto
overflow: auto;
.overflow-hidden
overflow: hidden;
.overflow-visible
overflow: visible;
.overflow-x-auto
overflow-x: auto;
.overflow-x-hidden
overflow-x: hidden;
.overflow-x-visible
overflow-x: visible;
.overflow-y-auto
overflow-y: auto;
.overflow-y-hidden
overflow-y: hidden;
.overflow-y-visible
overflow-y: visible;
.scrolling-touch
-webkit-overflow-scrolling: touch;
.scrolling-auto
-webkit-overflow-scrolling: auto;

Position

Class
Properties
.absolute
position: absolute;
.fixed
position: fixed;
.relative
position: relative;
.static
position: static;
.sticky
position: sticky;
.position-0
bottom: 0;
left: 0;
right: 0;
top: 0;
.position-auto
bottom: auto;
left: auto;
right: auto;
top: auto;
.bottom-0
bottom: 0;
.bottom-auto
bottom: auto;
.left-0
left: 0;
.left-auto
left: auto;
.right-0
right: 0;
.right-auto
right: auto;
.top-0
top: 0;
.top-auto
top: auto;

Visibility

Class
Properties
.visibility-hidden
visibility: hidden;
.visibility-visible
visibility: visible;

Z-Index

Class
Properties
.z-0
z-index: 0;
.z-10
z-index: 10;
.z-20
z-index: 20;
.z-30
z-index: 30;
.z-40
z-index: 40;
.z-50
z-index: 50;
.z-auto
z-index: auto;

Font Family

Class
Properties
.font-sans
font-family: -apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Helvetica Neue, sans-serif;
.font-serif
font-family: Georgia, Cambria, 'Times New Roman', Times, serif;
.font-mono
font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

Font Size

Class
Properties
.font-2xs
font-size: 0.765rem;
.font-xs
font-size: 0.824rem;
.font-s
font-size: 0.882rem;
.font-m
font-size: 1rem;
.font-l
font-size: 1.235rem;
.font-xl
font-size: 1.471rem;
.font-2xl
font-size: 1.824rem;
.font-3xl
font-size: 2.294rem;
.font-4xl
font-size: 3rem;
.font-5xl
font-size: 3.824rem;
.font-6xl
font-size: 4.647rem;

Font Smoothing

Class
Properties
.antialiased
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
.subpixel-antialiased
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: auto;

Font Style

Class
Properties
.font-italic
font-style: italic;
.font-normal
font-style: normal;

Font Weight

Class
Properties
.font-200
font-weight: 200;
.font-300
font-weight: 300;
.font-400
font-weight: 400;
.font-500
font-weight: 500;
.font-600
font-weight: 600;
.font-700
font-weight: 700;
.font-800
font-weight: 800;

Letter Spacing

Class
Properties
.letter-spacing-xs
letter-spacing: -0.05em;
.letter-spacing-s
letter-spacing: -0.025em;
.letter-spacing-m
letter-spacing: 1em;
.letter-spacing-l
letter-spacing: 0.025em;
.letter-spacing-xl
letter-spacing: 0.05em;
.letter-spacing-2xl
letter-spacing: 0.1em;
.letter-spacing-3xl
letter-spacing: 0.2em;

Line Height

Class
Properties
.line-height-4xs
line-height: 1;
.line-height-3xs
line-height: 1.1;
.line-height-2xs
line-height: 1.2;
.line-height-xs
line-height: 1.3;
.line-height-s
line-height: 1.4;
.line-height-m
line-height: 1.5;
.line-height-l
line-height: 1.6;
.line-height-xl
line-height: 1.7;
.line-height-2xl
line-height: 1.8;
.line-height-3xl
line-height: 1.9;
.line-height-4xl
line-height: 2;

Text Align

Class
Properties
.text-center
text-align: center;
.text-justify
text-align: justify;
.text-left
text-align: left;
.text-right
text-align: right;

Text Decoration

Class
Properties
.line-through
text-decoration: line-through;
.underline
text-decoration: underline;
.text-decoration-none
text-decoration: none;

Text Transform

Class
Properties
.capitalize
text-transform: capitalize;
.lowercase
text-transform: lowercase;
.uppercase
text-transform: uppercase;
.text-transform-none
text-transform: none;

Vertical Align

Class
Properties
.vertical-align-baseline
vertical-align: baseline;
.vertical-align-bottom
vertical-align: bottom;
.vertical-align-middle
vertical-align: middle;
.vertical-align-top
vertical-align: top;
.vertical-align-text-bottom
vertical-align: text-bottom;
.vertical-align-text-top
vertical-align: text-top;

White Space

Class
Properties
.white-space-normal
white-space: normal;
.white-space-nowrap
white-space: nowrap;
.white-space-pre
white-space: pre;
.white-space-pre-line
white-space: pre-line;
.white-space-pre-wrap
white-space: pre-wrap;

Word Wrap

Class
Properties
.word-wrap-break-word
word-wrap: break-word;
.word-wrap-normal
word-wrap: normal;

Background Attachment

Class
Properties
.bg-fixed
background-attachment: fixed;
.bg-scroll
background-attachment: scroll;

Background Color

Class
Properties
.bg-current
background-color: currentColor;
.bg-transparent
background-color: transparent;
.bg-black
background-color: #212121;
.bg-white
background-color: #ffffff;
.bg-grey-200
background-color: #f1f1f1;
.bg-grey-300
background-color: #e1e1e1;
.bg-grey-400
background-color: #c1c1c1;
.bg-grey-500
background-color: #919191;
.bg-grey-600
background-color: #717171;
.bg-grey-700
background-color: #515151;
.bg-grey-800
background-color: #313131;

Background Position

Class
Properties
.bg-bottom
background-position: bottom;
.bg-center
background-position: center;
.bg-left
background-position: left;
.bg-left-bottom
background-position: left bottom;
.bg-left-top
background-position: left top;
.bg-right
background-position: right;
.bg-right-bottom
background-position: right bottom;
.bg-right-top
background-position: right top;
.bg-top
background-position: top;

Background Repeat

Class
Properties
.bg-no-repeat
background-repeat: no-repeat;
.bg-repeat
background-repeat: repeat;
.bg-repeat-x
background-repeat: repeat-x;
.bg-repeat-y
background-repeat: repeat-y;

Background Size

Class
Properties
.bg-auto
background-size: auto;
.bg-contain
background-size: contain;
.bg-cover
background-size: cover;

Border Color

Class
Properties
.border-current
border-color: currentColor;
.border-transparent
border-color: transparent;
.border-black
border-color: #212121;
.border-white
border-color: #ffffff;
.border-grey-200
border-color: #f1f1f1;
.border-grey-300
border-color: #e1e1e1;
.border-grey-400
border-color: #c1c1c1;
.border-grey-500
border-color: #919191;
.border-grey-600
border-color: #717171;
.border-grey-700
border-color: #515151;
.border-grey-800
border-color: #313131;

Border Style

Class
Properties
.border-dashed
border-style: dashed;
.border-dotted
border-style: dotted;
.border-solid
border-style: solid;
.border-none
border-style: none;

Border Radius

Class
Properties
.radius
border-radius: 4px;
.radius-full
border-radius: 9999px;

Border Width

Class
Properties
.border-0
border-width: 0;
.border-1
border-width: 1px;
.border-2
border-width: 2px;
.border-3
border-width: 3px;
.border-4
border-width: 4px;
.border-bottom-0
border-bottom-width: 0;
.border-bottom-1
border-bottom-width: 1px;
.border-bottom-2
border-bottom-width: 2px;
.border-bottom-3
border-bottom-width: 3px;
.border-bottom-4
border-bottom-width: 4px;
.border-left-0
border-left-width: 0;
.border-left-1
border-left-width: 1px;
.border-left-2
border-left-width: 2px;
.border-left-3
border-left-width: 3px;
.border-left-4
border-left-width: 4px;
.border-top-0
border-top-width: 0;
.border-top-1
border-top-width: 1px;
.border-top-2
border-top-width: 2px;
.border-top-3
border-top-width: 3px;
.border-top-4
border-top-width: 4px;
.border-right-0
border-right-width: 0;
.border-right-1
border-right-width: 1px;
.border-right-2
border-right-width: 2px;
.border-right-3
border-right-width: 3px;
.border-right-4
border-right-width: 4px;

Flex

Class
Properties
.flex-1
flex: 1;
.flex-auto
flex: auto;
.flex-initial
flex: initial;
.flex-none
flex: none;

Flex Direction

Class
Properties
.flex-col
flex-direction: column;
.flex-col-reverse
flex-direction: column-reverse;
.flex-row
flex-direction: row;
.flex-row-reverse
flex-direction: row-reverse;

Flex Grow

Class
Properties
.flex-grow-0
flex-grow: 0;
.flex-grow-1
flex-grow: 1;

Flex Shrink

Class
Properties
.flex-shrink-0
flex-shrink: 0;
.flex-shrink-1
flex-shrink: 1;

Flex Wrap

Class
Properties
.flex-nowrap
flex-wrap: nowrap;
.flex-wrap
flex-wrap: wrap;
.flex-wrap-reverse
flex-wrap: wrap-reverse;

Align Content

Class
Properties
.content-around
align-content: space-around;
.content-between
align-content: space-between;
.content-center
align-content: center;
.content-end
align-content: flex-end;
.content-start
align-content: flex-start;

Align Items

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

Align Self

Class
Properties
.self-auto
align-self: auto;
.self-center
align-self: center;
.self-end
align-self: flex-end;
.self-start
align-self: flex-start;
.self-stretch
align-self: stretch;

Justify Content

Class
Properties
.justify-around
justify-content: space-around;
.justify-between
justify-content: space-between;
.justify-center
justify-content: center;
.justify-end
justify-content: flex-end;
.justify-start
justify-content: flex-start;

Order

Class
Properties
.order-0
order: 0;
.order-1
order: 1;
.order--1
order: -1;

Margin

Class
Properties
.m-0
margin: 0;
.m-1
margin: 0.25rem;
.m-2
margin: 0.5rem;
.m-3
margin: 0.75rem;
.m-4
margin: 1rem;
.m-5
margin: 1.25rem;
.m-6
margin: 1.5rem;
.m-8
margin: 2rem;
.m-10
margin: 2.5rem;
.m-12
margin: 3rem;
.m-16
margin: 4rem;
.m-20
margin: 5rem;
.m-24
margin: 6rem;
.m-32
margin: 8rem;
.m-40
margin: 10rem;
.m-48
margin: 12rem;
.m-56
margin: 14rem;
.m-64
margin: 16rem;
.m-1px
margin: 1px;
.m-auto
margin: auto;
.m--1
margin: -0.25rem;
.m--2
margin: -0.5rem;
.m--3
margin: -0.75rem;
.m--4
margin: -1rem;
.m--5
margin: -1.25rem;
.m--6
margin: -1.5rem;
.m--8
margin: -2rem;
.m--10
margin: -2.5rem;
.m--12
margin: -3rem;
.m--16
margin: -4rem;
.m--20
margin: -5rem;
.m--24
margin: -6rem;
.m--32
margin: -8rem;
.m--40
margin: -10rem;
.m--48
margin: -12rem;
.m--56
margin: -14rem;
.m--64
margin: -16rem;
.m--1px
margin: -1px;
.mb-0
margin-bottom: 0;
.mb-1
margin-bottom: 0.25rem;
.mb-2
margin-bottom: 0.5rem;
.mb-3
margin-bottom: 0.75rem;
.mb-4
margin-bottom: 1rem;
.mb-5
margin-bottom: 1.25rem;
.mb-6
margin-bottom: 1.5rem;
.mb-8
margin-bottom: 2rem;
.mb-10
margin-bottom: 2.5rem;
.mb-12
margin-bottom: 3rem;
.mb-16
margin-bottom: 4rem;
.mb-20
margin-bottom: 5rem;
.mb-24
margin-bottom: 6rem;
.mb-32
margin-bottom: 8rem;
.mb-40
margin-bottom: 10rem;
.mb-48
margin-bottom: 12rem;
.mb-56
margin-bottom: 14rem;
.mb-64
margin-bottom: 16rem;
.mb-1px
margin-bottom: 1px;
.mb-auto
margin-bottom: auto;
.mb--1
margin-bottom: -0.25rem;
.mb--2
margin-bottom: -0.5rem;
.mb--3
margin-bottom: -0.75rem;
.mb--4
margin-bottom: -1rem;
.mb--5
margin-bottom: -1.25rem;
.mb--6
margin-bottom: -1.5rem;
.mb--8
margin-bottom: -2rem;
.mb--10
margin-bottom: -2.5rem;
.mb--12
margin-bottom: -3rem;
.mb--16
margin-bottom: -4rem;
.mb--20
margin-bottom: -5rem;
.mb--24
margin-bottom: -6rem;
.mb--32
margin-bottom: -8rem;
.mb--40
margin-bottom: -10rem;
.mb--48
margin-bottom: -12rem;
.mb--56
margin-bottom: -14rem;
.mb--64
margin-bottom: -16rem;
.mb--1px
margin-bottom: -1px;
.ml-0
margin-left: 0;
.ml-1
margin-left: 0.25rem;
.ml-2
margin-left: 0.5rem;
.ml-3
margin-left: 0.75rem;
.ml-4
margin-left: 1rem;
.ml-5
margin-left: 1.25rem;
.ml-6
margin-left: 1.5rem;
.ml-8
margin-left: 2rem;
.ml-10
margin-left: 2.5rem;
.ml-12
margin-left: 3rem;
.ml-16
margin-left: 4rem;
.ml-20
margin-left: 5rem;
.ml-24
margin-left: 6rem;
.ml-32
margin-left: 8rem;
.ml-40
margin-left: 10rem;
.ml-48
margin-left: 12rem;
.ml-56
margin-left: 14rem;
.ml-64
margin-left: 16rem;
.ml-1px
margin-left: 1px;
.ml-auto
margin-left: auto;
.ml--1
margin-left: -0.25rem;
.ml--2
margin-left: -0.5rem;
.ml--3
margin-left: -0.75rem;
.ml--4
margin-left: -1rem;
.ml--5
margin-left: -1.25rem;
.ml--6
margin-left: -1.5rem;
.ml--8
margin-left: -2rem;
.ml--10
margin-left: -2.5rem;
.ml--12
margin-left: -3rem;
.ml--16
margin-left: -4rem;
.ml--20
margin-left: -5rem;
.ml--24
margin-left: -6rem;
.ml--32
margin-left: -8rem;
.ml--40
margin-left: -10rem;
.ml--48
margin-left: -12rem;
.ml--56
margin-left: -14rem;
.ml--64
margin-left: -16rem;
.ml--1px
margin-left: -1px;
.mr-0
margin-right: 0;
.mr-1
margin-right: 0.25rem;
.mr-2
margin-right: 0.5rem;
.mr-3
margin-right: 0.75rem;
.mr-4
margin-right: 1rem;
.mr-5
margin-right: 1.25rem;
.mr-6
margin-right: 1.5rem;
.mr-8
margin-right: 2rem;
.mr-10
margin-right: 2.5rem;
.mr-12
margin-right: 3rem;
.mr-16
margin-right: 4rem;
.mr-20
margin-right: 5rem;
.mr-24
margin-right: 6rem;
.mr-32
margin-right: 8rem;
.mr-40
margin-right: 10rem;
.mr-48
margin-right: 12rem;
.mr-56
margin-right: 14rem;
.mr-64
margin-right: 16rem;
.mr-1px
margin-right: 1px;
.mr-auto
margin-right: auto;
.mr--1
margin-right: -0.25rem;
.mr--2
margin-right: -0.5rem;
.mr--3
margin-right: -0.75rem;
.mr--4
margin-right: -1rem;
.mr--5
margin-right: -1.25rem;
.mr--6
margin-right: -1.5rem;
.mr--8
margin-right: -2rem;
.mr--10
margin-right: -2.5rem;
.mr--12
margin-right: -3rem;
.mr--16
margin-right: -4rem;
.mr--20
margin-right: -5rem;
.mr--24
margin-right: -6rem;
.mr--32
margin-right: -8rem;
.mr--40
margin-right: -10rem;
.mr--48
margin-right: -12rem;
.mr--56
margin-right: -14rem;
.mr--64
margin-right: -16rem;
.mr--1px
margin-right: -1px;
.mt-0
margin-top: 0;
.mt-1
margin-top: 0.25rem;
.mt-2
margin-top: 0.5rem;
.mt-3
margin-top: 0.75rem;
.mt-4
margin-top: 1rem;
.mt-5
margin-top: 1.25rem;
.mt-6
margin-top: 1.5rem;
.mt-8
margin-top: 2rem;
.mt-10
margin-top: 2.5rem;
.mt-12
margin-top: 3rem;
.mt-16
margin-top: 4rem;
.mt-20
margin-top: 5rem;
.mt-24
margin-top: 6rem;
.mt-32
margin-top: 8rem;
.mt-40
margin-top: 10rem;
.mt-48
margin-top: 12rem;
.mt-56
margin-top: 14rem;
.mt-64
margin-top: 16rem;
.mt-1px
margin-top: 1px;
.mt-auto
margin-top: auto;
.mt--1
margin-top: -0.25rem;
.mt--2
margin-top: -0.5rem;
.mt--3
margin-top: -0.75rem;
.mt--4
margin-top: -1rem;
.mt--5
margin-top: -1.25rem;
.mt--6
margin-top: -1.5rem;
.mt--8
margin-top: -2rem;
.mt--10
margin-top: -2.5rem;
.mt--12
margin-top: -3rem;
.mt--16
margin-top: -4rem;
.mt--20
margin-top: -5rem;
.mt--24
margin-top: -6rem;
.mt--32
margin-top: -8rem;
.mt--40
margin-top: -10rem;
.mt--48
margin-top: -12rem;
.mt--56
margin-top: -14rem;
.mt--64
margin-top: -16rem;
.mt--1px
margin-top: -1px;
.mx-0
margin-left: 0;
margin-right: 0;
.mx-1
margin-left: 0.25rem;
margin-right: 0.25rem;
.mx-2
margin-left: 0.5rem;
margin-right: 0.5rem;
.mx-3
margin-left: 0.75rem;
margin-right: 0.75rem;
.mx-4
margin-left: 1rem;
margin-right: 1rem;
.mx-5
margin-left: 1.25rem;
margin-right: 1.25rem;
.mx-6
margin-left: 1.5rem;
margin-right: 1.5rem;
.mx-8
margin-left: 2rem;
margin-right: 2rem;
.mx-10
margin-left: 2.5rem;
margin-right: 2.5rem;
.mx-12
margin-left: 3rem;
margin-right: 3rem;
.mx-16
margin-left: 4rem;
margin-right: 4rem;
.mx-20
margin-left: 5rem;
margin-right: 5rem;
.mx-24
margin-left: 6rem;
margin-right: 6rem;
.mx-32
margin-left: 8rem;
margin-right: 8rem;
.mx-40
margin-left: 10rem;
margin-right: 10rem;
.mx-48
margin-left: 12rem;
margin-right: 12rem;
.mx-56
margin-left: 14rem;
margin-right: 14rem;
.mx-64
margin-left: 16rem;
margin-right: 16rem;
.mx-1px
margin-left: 1px;
margin-right: 1px;
.mx-auto
margin-left: auto;
margin-right: auto;
.mx--1
margin-left: -0.25rem;
margin-right: -0.25rem;
.mx--2
margin-left: -0.5rem;
margin-right: -0.5rem;
.mx--3
margin-left: -0.75rem;
margin-right: -0.75rem;
.mx--4
margin-left: -1rem;
margin-right: -1rem;
.mx--5
margin-left: -1.25rem;
margin-right: -1.25rem;
.mx--6
margin-left: -1.5rem;
margin-right: -1.5rem;
.mx--8
margin-left: -2rem;
margin-right: -2rem;
.mx--10
margin-left: -2.5rem;
margin-right: -2.5rem;
.mx--12
margin-left: -3rem;
margin-right: -3rem;
.mx--16
margin-left: -4rem;
margin-right: -4rem;
.mx--20
margin-left: -5rem;
margin-right: -5rem;
.mx--24
margin-left: -6rem;
margin-right: -6rem;
.mx--32
margin-left: -8rem;
margin-right: -8rem;
.mx--40
margin-left: -10rem;
margin-right: -10rem;
.mx--48
margin-left: -12rem;
margin-right: -12rem;
.mx--56
margin-left: -14rem;
margin-right: -14rem;
.mx--64
margin-left: -16rem;
margin-right: -16rem;
.mx--1px
margin-left: -1px;
margin-right: -1px;
.my-0
margin-top: 0;
margin-bottom: 0;
.my-1
margin-top: 0.25rem;
margin-bottom: 0.25rem;
.my-2
margin-top: 0.5rem;
margin-bottom: 0.5rem;
.my-3
margin-top: 0.75rem;
margin-bottom: 0.75rem;
.my-4
margin-top: 1rem;
margin-bottom: 1rem;
.my-5
margin-top: 1.25rem;
margin-bottom: 1.25rem;
.my-6
margin-top: 1.5rem;
margin-bottom: 1.5rem;
.my-8
margin-top: 2rem;
margin-bottom: 2rem;
.my-10
margin-top: 2.5rem;
margin-bottom: 2.5rem;
.my-12
margin-top: 3rem;
margin-bottom: 3rem;
.my-16
margin-top: 4rem;
margin-bottom: 4rem;
.my-20
margin-top: 5rem;
margin-bottom: 5rem;
.my-24
margin-top: 6rem;
margin-bottom: 6rem;
.my-32
margin-top: 8rem;
margin-bottom: 8rem;
.my-40
margin-top: 10rem;
margin-bottom: 10rem;
.my-48
margin-top: 12rem;
margin-bottom: 12rem;
.my-56
margin-top: 14rem;
margin-bottom: 14rem;
.my-64
margin-top: 16rem;
margin-bottom: 16rem;
.my-1px
margin-top: 1px;
margin-bottom: 1px;
.my-auto
margin-top: auto;
margin-bottom: auto;
.my--1
margin-top: -0.25rem;
margin-bottom: -0.25rem;
.my--2
margin-top: -0.5rem;
margin-bottom: -0.5rem;
.my--3
margin-top: -0.75rem;
margin-bottom: -0.75rem;
.my--4
margin-top: -1rem;
margin-bottom: -1rem;
.my--5
margin-top: -1.25rem;
margin-bottom: -1.25rem;
.my--6
margin-top: -1.5rem;
margin-bottom: -1.5rem;
.my--8
margin-top: -2rem;
margin-bottom: -2rem;
.my--10
margin-top: -2.5rem;
margin-bottom: -2.5rem;
.my--12
margin-top: -3rem;
margin-bottom: -3rem;
.my--16
margin-top: -4rem;
margin-bottom: -4rem;
.my--20
margin-top: -5rem;
margin-bottom: -5rem;
.my--24
margin-top: -6rem;
margin-bottom: -6rem;
.my--32
margin-top: -8rem;
margin-bottom: -8rem;
.my--40
margin-top: -10rem;
margin-bottom: -10rem;
.my--48
margin-top: -12rem;
margin-bottom: -12rem;
.my--56
margin-top: -14rem;
margin-bottom: -14rem;
.my--64
margin-top: -16rem;
margin-bottom: -16rem;
.my--1px
margin-top: -1px;
margin-bottom: -1px;

Padding

Class
Properties
.p-0
padding: 0;
.p-1
padding: 0.25rem;
.p-2
padding: 0.5rem;
.p-3
padding: 0.75rem;
.p-4
padding: 1rem;
.p-5
padding: 1.25rem;
.p-6
padding: 1.5rem;
.p-8
padding: 2rem;
.p-10
padding: 2.5rem;
.p-12
padding: 3rem;
.p-16
padding: 4rem;
.p-20
padding: 5rem;
.p-24
padding: 6rem;
.p-32
padding: 8rem;
.p-40
padding: 10rem;
.p-48
padding: 12rem;
.p-56
padding: 14rem;
.p-64
padding: 16rem;
.p-1px
padding: 1px;
.pb-0
padding-bottom: 0;
.pb-1
padding-bottom: 0.25rem;
.pb-2
padding-bottom: 0.5rem;
.pb-3
padding-bottom: 0.75rem;
.pb-4
padding-bottom: 1rem;
.pb-5
padding-bottom: 1.25rem;
.pb-6
padding-bottom: 1.5rem;
.pb-8
padding-bottom: 2rem;
.pb-10
padding-bottom: 2.5rem;
.pb-12
padding-bottom: 3rem;
.pb-16
padding-bottom: 4rem;
.pb-20
padding-bottom: 5rem;
.pb-24
padding-bottom: 6rem;
.pb-32
padding-bottom: 8rem;
.pb-40
padding-bottom: 10rem;
.pb-48
padding-bottom: 12rem;
.pb-56
padding-bottom: 14rem;
.pb-64
padding-bottom: 16rem;
.pb-1px
padding-bottom: 1px;
.pl-0
padding-left: 0;
.pl-1
padding-left: 0.25rem;
.pl-2
padding-left: 0.5rem;
.pl-3
padding-left: 0.75rem;
.pl-4
padding-left: 1rem;
.pl-5
padding-left: 1.25rem;
.pl-6
padding-left: 1.5rem;
.pl-8
padding-left: 2rem;
.pl-10
padding-left: 2.5rem;
.pl-12
padding-left: 3rem;
.pl-16
padding-left: 4rem;
.pl-20
padding-left: 5rem;
.pl-24
padding-left: 6rem;
.pl-32
padding-left: 8rem;
.pl-40
padding-left: 10rem;
.pl-48
padding-left: 12rem;
.pl-56
padding-left: 14rem;
.pl-64
padding-left: 16rem;
.pl-1px
padding-left: 1px;
.pr-0
padding-right: 0;
.pr-1
padding-right: 0.25rem;
.pr-2
padding-right: 0.5rem;
.pr-3
padding-right: 0.75rem;
.pr-4
padding-right: 1rem;
.pr-5
padding-right: 1.25rem;
.pr-6
padding-right: 1.5rem;
.pr-8
padding-right: 2rem;
.pr-10
padding-right: 2.5rem;
.pr-12
padding-right: 3rem;
.pr-16
padding-right: 4rem;
.pr-20
padding-right: 5rem;
.pr-24
padding-right: 6rem;
.pr-32
padding-right: 8rem;
.pr-40
padding-right: 10rem;
.pr-48
padding-right: 12rem;
.pr-56
padding-right: 14rem;
.pr-64
padding-right: 16rem;
.pr-1px
padding-right: 1px;
.pt-0
padding-top: 0;
.pt-1
padding-top: 0.25rem;
.pt-2
padding-top: 0.5rem;
.pt-3
padding-top: 0.75rem;
.pt-4
padding-top: 1rem;
.pt-5
padding-top: 1.25rem;
.pt-6
padding-top: 1.5rem;
.pt-8
padding-top: 2rem;
.pt-10
padding-top: 2.5rem;
.pt-12
padding-top: 3rem;
.pt-16
padding-top: 4rem;
.pt-20
padding-top: 5rem;
.pt-24
padding-top: 6rem;
.pt-32
padding-top: 8rem;
.pt-40
padding-top: 10rem;
.pt-48
padding-top: 12rem;
.pt-56
padding-top: 14rem;
.pt-64
padding-top: 16rem;
.pt-1px
padding-top: 1px;
.px-0
padding-left: 0;
padding-right: 0;
.px-1
padding-left: 0.25rem;
padding-right: 0.25rem;
.px-2
padding-left: 0.5rem;
padding-right: 0.5rem;
.px-3
padding-left: 0.75rem;
padding-right: 0.75rem;
.px-4
padding-left: 1rem;
padding-right: 1rem;
.px-5
padding-left: 1.25rem;
padding-right: 1.25rem;
.px-6
padding-left: 1.5rem;
padding-right: 1.5rem;
.px-8
padding-left: 2rem;
padding-right: 2rem;
.px-10
padding-left: 2.5rem;
padding-right: 2.5rem;
.px-12
padding-left: 3rem;
padding-right: 3rem;
.px-16
padding-left: 4rem;
padding-right: 4rem;
.px-20
padding-left: 5rem;
padding-right: 5rem;
.px-24
padding-left: 6rem;
padding-right: 6rem;
.px-32
padding-left: 8rem;
padding-right: 8rem;
.px-40
padding-left: 10rem;
padding-right: 10rem;
.px-48
padding-left: 12rem;
padding-right: 12rem;
.px-56
padding-left: 14rem;
padding-right: 14rem;
.px-64
padding-left: 16rem;
padding-right: 16rem;
.px-1px
padding-left: 1px;
padding-right: 1px;
.py-0
padding-top: 0;
padding-bottom: 0;
.py-1
padding-top: 0.25rem;
padding-bottom: 0.25rem;
.py-2
padding-top: 0.5rem;
padding-bottom: 0.5rem;
.py-3
padding-top: 0.75rem;
padding-bottom: 0.75rem;
.py-4
padding-top: 1rem;
padding-bottom: 1rem;
.py-5
padding-top: 1.25rem;
padding-bottom: 1.25rem;
.py-6
padding-top: 1.5rem;
padding-bottom: 1.5rem;
.py-8
padding-top: 2rem;
padding-bottom: 2rem;
.py-10
padding-top: 2.5rem;
padding-bottom: 2.5rem;
.py-12
padding-top: 3rem;
padding-bottom: 3rem;
.py-16
padding-top: 4rem;
padding-bottom: 4rem;
.py-20
padding-top: 5rem;
padding-bottom: 5rem;
.py-24
padding-top: 6rem;
padding-bottom: 6rem;
.py-32
padding-top: 8rem;
padding-bottom: 8rem;
.py-40
padding-top: 10rem;
padding-bottom: 10rem;
.py-48
padding-top: 12rem;
padding-bottom: 12rem;
.py-56
padding-top: 14rem;
padding-bottom: 14rem;
.py-64
padding-top: 16rem;
padding-bottom: 16rem;
.py-1px
padding-top: 1px;
padding-bottom: 1px;

Height

Class
Properties
.height-0
height: 0;
.height-1
height: 0.25rem;
.height-2
height: 0.5rem;
.height-3
height: 0.75rem;
.height-4
height: 1rem;
.height-5
height: 1.25rem;
.height-6
height: 1.5rem;
.height-8
height: 2rem;
.height-10
height: 2.5rem;
.height-12
height: 3rem;
.height-16
height: 4rem;
.height-20
height: 5rem;
.height-24
height: 6rem;
.height-32
height: 8rem;
.height-40
height: 10rem;
.height-48
height: 12rem;
.height-56
height: 14rem;
.height-64
height: 16rem;
.height-1px
height: 1px;
.height-100vh
height: 100vh;
.height-auto
height: auto;
.height-full
height: 100%;

Min-Height

Class
Properties
.min-height-0
min-height: 0;
.min-height-100vh
min-height: 100vh;
.min-height-full
min-height: 100%;

Max-Height

Class
Properties
.max-height-100vh
max-height: 100vh;
.max-height-full
max-height: 100%;

Width

Class
Properties
.width-0
width: 0;
.width-1
width: 0.25rem;
.width-2
width: 0.5rem;
.width-3
width: 0.75rem;
.width-4
width: 1rem;
.width-5
width: 1.25rem;
.width-6
width: 1.5rem;
.width-8
width: 2rem;
.width-10
width: 2.5rem;
.width-12
width: 3rem;
.width-16
width: 4rem;
.width-20
width: 5rem;
.width-24
width: 6rem;
.width-32
width: 8rem;
.width-40
width: 10rem;
.width-48
width: 12rem;
.width-56
width: 14rem;
.width-64
width: 16rem;
.width-1/2
width: 50%;
.width-1/3
width: 33.33333%;
.width-2/3
width: 66.66667%;
.width-1/4
width: 25%;
.width-3/4
width: 75%;
.width-1/5
width: 20%;
.width-2/5
width: 40%;
.width-3/5
width: 60%;
.width-4/5
width: 80%;
.width-1/6
width: 16.66667%;
.width-5/6
width: 83.33333%;
.width-1/7
width: 14.28571%;
.width-2/7
width: 28.57143%;
.width-3/7
width: 42.85714%;
.width-4/7
width: 57.14286%;
.width-5/7
width: 71.42857%;
.width-6/7
width: 85.71429%;
.width-1/8
width: 12.5%;
.width-3/8
width: 37.5%;
.width-5/8
width: 62.5%;
.width-7/8
width: 87.5%;
.width-1/12
width: 8.33333%;
.width-5/12
width: 41.66667%;
.width-7/12
width: 58.33333%;
.width-11/12
width: 91.66667%;
.width-1px
width: 1px;
.width-100vw
width: 100vw;
.width-auto
width: auto;
.width-full
width: 100%;

Min-Width

Class
Properties
.min-width-0
min-width: 0;
.min-width-full
min-width: 100%;
.min-width-m
min-width: 600px;
.min-width-l
min-width: 900px;
.min-width-xl
min-width: 1200px;

Max-Width

Class
Properties
.max-width-0
max-width: 0;
.max-width-1
max-width: 0.25rem;
.max-width-2
max-width: 0.5rem;
.max-width-3
max-width: 0.75rem;
.max-width-4
max-width: 1rem;
.max-width-5
max-width: 1.25rem;
.max-width-6
max-width: 1.5rem;
.max-width-8
max-width: 2rem;
.max-width-10
max-width: 2.5rem;
.max-width-12
max-width: 3rem;
.max-width-16
max-width: 4rem;
.max-width-20
max-width: 5rem;
.max-width-24
max-width: 6rem;
.max-width-32
max-width: 8rem;
.max-width-40
max-width: 10rem;
.max-width-48
max-width: 12rem;
.max-width-56
max-width: 14rem;
.max-width-64
max-width: 16rem;
.max-width-96
max-width: 24rem;
.max-width-128
max-width: 32rem;
.max-width-192
max-width: 48rem;
.max-width-256
max-width: 64rem;
.max-width-100vw
max-width: 100vw;
.max-width-full
max-width: 100%;
.max-width-m
max-width: 600px;
.max-width-l
max-width: 900px;
.max-width-xl
max-width: 1200px;

Box Shadow

Class
Properties
.shadow-s
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
.shadow-m
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);
.shadow-l
box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08);
.shadow-inner
box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06);
.shadow-outline
box-shadow: 0 0 0 3px rgba(52,144,220,0.5);
.shadow-none
box-shadow: none;

Opacity

Class
Properties
.opacity-0
opacity: 0;
.opacity-20
opacity: 0.2;
.opacity-40
opacity: 0.4;
.opacity-60
opacity: 0.6;
.opacity-80
opacity: 0.8;
.opacity-100
opacity: 1;

Transition

Class
Properties
.transition-all
transition: all 0.075s;
.transition-border
transition: border 0.075s;
.transition-background
transition: background 0.075s;
.transition-color
transition: color 0.075s;
.transition-decoration
transition: text-decoration 0.075s;
.transition-none
transition: none;

Appearance

Class
Properties
.appearance-none
-moz-appearance: none;
-webkit-appearance: none;

Cursor

Class
Properties
.cursor-auto
cursor: auto;
.cursor-default
cursor: default;
.cursor-move
cursor: move;
.cursor-not-allowed
cursor: not-allowed;
.cursor-pointer
cursor: pointer;
.cursor-text
cursor: text;
.cursor-wait
cursor: wait;

Outline

Class
Properties
.outline-none
outline: none;

Pointer Events

Class
Properties
.pointer-events-auto
pointer-events: auto;
.pointer-events-none
pointer-events: none;

Resize

Class
Properties
.resize
resize: both;
.resize-x
resize: horizontal;
.resize-y
resize: vertical;
.resize-none
resize: none;

User Select

Class
Properties
.user-select-auto
user-select: auto;
.user-select-all
user-select: all;
.user-select-text
user-select: text;
.user-select-none
user-select: none;

SVG

Class
Properties
.fill-current
fill: currentColor;
.stroke-current
stroke: currentColor;