Layout

container

.container

display

.block
1
2
3
.inline-block
1
2
3
.inline
1
2
3
.hidden
1
3
.table, .table-row, .table-cell
.table
.table-row
.table-cell
.table-cell
.table-cell
.table-row
.table-cell
.table-cell
.table-cell
.table-row
.table-cell
.table-cell
.table-cell

floats

.float-right
1
2
3
.float-left
1
2
3
.clearfix
Lorem ipsum dolor sit amet.
1
2
3

overflow

.overflow-auto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et viverra mauris. Nunc id consequat tortor, a tempor ante. In sed tempor ipsum. Mauris accumsan auctor nibh et hendrerit. Mauris nec faucibus leo. Nullam bibendum et lectus non viverra. Ut et laoreet est, in euismod magna. Quisque pellentesque lectus ac tincidunt scelerisque. Morbi vehicula sapien dui, a faucibus metus elementum a. Maecenas non lacinia neque. Curabitur efficitur enim a mauris placerat faucibus eu vel tellus. Pellentesque ornare sapien at massa volutpat sollicitudin. Curabitur pellentesque sodales elit, nec iaculis massa accumsan pharetra. Integer dictum mi id volutpat porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

.overflow-hidden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et viverra mauris. Nunc id consequat tortor, a tempor ante. In sed tempor ipsum. Mauris accumsan auctor nibh et hendrerit. Mauris nec faucibus leo. Nullam bibendum et lectus non viverra. Ut et laoreet est, in euismod magna. Quisque pellentesque lectus ac tincidunt scelerisque. Morbi vehicula sapien dui, a faucibus metus elementum a. Maecenas non lacinia neque. Curabitur efficitur enim a mauris placerat faucibus eu vel tellus. Pellentesque ornare sapien at massa volutpat sollicitudin. Curabitur pellentesque sodales elit, nec iaculis massa accumsan pharetra. Integer dictum mi id volutpat porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

.overflow-visible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et viverra mauris. Nunc id consequat tortor, a tempor ante. In sed tempor ipsum. Mauris accumsan auctor nibh et hendrerit. Mauris nec faucibus leo. Nullam bibendum et lectus non viverra. Ut et laoreet est, in euismod magna. Quisque pellentesque lectus ac tincidunt scelerisque. Morbi vehicula sapien dui, a faucibus metus elementum a. Maecenas non lacinia neque. Curabitur efficitur enim a mauris placerat faucibus eu vel tellus. Pellentesque ornare sapien at massa volutpat sollicitudin. Curabitur pellentesque sodales elit, nec iaculis massa accumsan pharetra. Integer dictum mi id volutpat porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

.overflow-scroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et viverra mauris. Nunc id consequat tortor, a tempor ante. In sed tempor ipsum. Mauris accumsan auctor nibh et hendrerit. Mauris nec faucibus leo. Nullam bibendum et lectus non viverra. Ut et laoreet est, in euismod magna. Quisque pellentesque lectus ac tincidunt scelerisque. Morbi vehicula sapien dui, a faucibus metus elementum a. Maecenas non lacinia neque. Curabitur efficitur enim a mauris placerat faucibus eu vel tellus. Pellentesque ornare sapien at massa volutpat sollicitudin. Curabitur pellentesque sodales elit, nec iaculis massa accumsan pharetra. Integer dictum mi id volutpat porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

.overflow-x-auto
width: 50%
width: 100%
width: 200%
.overflow-x-scroll

Lorem ipsum.

.overflow-y-auto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et viverra mauris. Nunc id consequat tortor, a tempor ante. In sed tempor ipsum. Mauris accumsan auctor nibh et hendrerit. Mauris nec faucibus leo. Nullam bibendum et lectus non viverra. Ut et laoreet est, in euismod magna. Quisque pellentesque lectus ac tincidunt scelerisque. Morbi vehicula sapien dui, a faucibus metus elementum a. Maecenas non lacinia neque. Curabitur efficitur enim a mauris placerat faucibus eu vel tellus. Pellentesque ornare sapien at massa volutpat sollicitudin. Curabitur pellentesque sodales elit, nec iaculis massa accumsan pharetra. Integer dictum mi id volutpat porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

.overflow-y-scroll

Lorem ipsum.

position

.static
1
2
3
.fixed
1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et viverra mauris. Nunc id consequat tortor, a tempor ante. In sed tempor ipsum. Mauris accumsan auctor nibh et hendrerit. Mauris nec faucibus leo. Nullam bibendum et lectus non viverra. Ut et laoreet est, in euismod magna. Quisque pellentesque lectus ac tincidunt scelerisque. Morbi vehicula sapien dui, a faucibus metus elementum a. Maecenas non lacinia neque. Curabitur efficitur enim a mauris placerat faucibus eu vel tellus. Pellentesque ornare sapien at massa volutpat sollicitudin. Curabitur pellentesque sodales elit, nec iaculis massa accumsan pharetra. Integer dictum mi id volutpat porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

.absolute
3
1
2
3
.sticky

scroll

top: 0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et viverra mauris. Nunc id consequat tortor, a tempor ante. In sed tempor ipsum. Mauris accumsan auctor nibh et hendrerit. Mauris nec faucibus leo. Nullam bibendum et lectus non viverra. Ut et laoreet est, in euismod magna. Quisque pellentesque lectus ac tincidunt scelerisque. Morbi vehicula sapien dui, a faucibus metus elementum a. Maecenas non lacinia neque. Curabitur efficitur enim a mauris placerat faucibus eu vel tellus. Pellentesque ornare sapien at massa volutpat sollicitudin. Curabitur pellentesque sodales elit, nec iaculis massa accumsan pharetra. Integer dictum mi id volutpat porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Absolute positioning from center
.pin-none .pin-t .pin-l .pin-r .pin-b .pin-y .pin-x
.pin
.pin

visibility

.visible
1
2
3
.invisible
1
3

z-index

.z-auto
.z-0
.z-10
.z-20
.z-30
.z-40

Breakpoint Prefix

<div class="sm:text-red md:text-blue lg:text-yellow xl:text-teal"> ... </div>

sm:text-red

md:text-blue

lg:text-yellow

xl:text-teal

Typography

font-size

.text-xs
Lorem ipsum dolor sit amet
.text-sm
Lorem ipsum dolor sit amet
.text-base
Lorem ipsum dolor sit amet
.text-lg
Lorem ipsum dolor sit amet
.text-xl
Lorem ipsum dolor sit amet
.text-2xl
Lorem ipsum dolor sit amet
.text-3xl
Lorem ipsum dolor sit amet
.text-4xl
Lorem ipsum dolor sit amet
.text-5xl
Lorem ipsum dolor sit amet

font-family

Lorem ipsum dolor sit amet
.font-sans
Lorem ipsum dolor sit amet
.font-serif
Lorem ipsum dolor sit amet
.font-mono
Lorem ipsum dolor sit amet

font-weight

Lorem ipsum dolor sit amet
.font-hairline
Lorem ipsum dolor sit amet
.font-thin
Lorem ipsum dolor sit amet
.font-light
Lorem ipsum dolor sit amet
.font-normal
Lorem ipsum dolor sit amet
.font-medium
Lorem ipsum dolor sit amet
.font-semibold
Lorem ipsum dolor sit amet
.font-bold
Lorem ipsum dolor sit amet
.font-extrabold
Lorem ipsum dolor sit amet
.font-black
Lorem ipsum dolor sit amet

letter-spacing

Lorem ipsum dolor sit amet
.tracking-tight
Lorem ipsum dolor sit amet
.tracking-normal
Lorem ipsum dolor sit amet
.tracking-wide
Lorem ipsum dolor sit amet

line-height

Lorem ipsum dolor sit amet
.leading-none
Lorem ipsum dolor sit amet
.leading-tight
Lorem ipsum dolor sit amet
.leading-normal
Lorem ipsum dolor sit amet
.leading-loose
Lorem ipsum dolor sit amet

lists

  • List item 1
  • List item 2
  • List item 3
.list-reset
  • List item 1
  • List item 2
  • List item 3

font-style

Lorem ipsum dolor sit amet
.italic
Lorem ipsum dolor sit amet
.roman
Lorem ipsum dolor sit amet

text-transform

Lorem ipsum dolor sit amet
.uppercase
Lorem ipsum dolor sit amet
.lowercase
Lorem ipsum dolor sit amet
.capitalize
Lorem ipsum dolor sit amet
.normal-case
Lorem ipsum dolor sit amet

text-decoration

Lorem ipsum dolor sit amet
.underline
Lorem ipsum dolor sit amet
.line-through
Lorem ipsum dolor sit amet
.no-underline
Lorem ipsum dolor sit amet

font-smoothing

Lorem ipsum dolor sit amet
.antialiased
Lorem ipsum dolor sit amet
.subpixel-antialiased
Lorem ipsum dolor sit amet

text-align

Lorem ipsum dolor sit amet
.text-left
Lorem ipsum dolor sit amet
.text-center
Lorem ipsum dolor sit amet
.text-right
Lorem ipsum dolor sit amet
.text-justify
Lorem ipsum dolor sit amet

vertical-align

Lorem ipsum dolor sit amet
.align-baseline
Lorem ipsum dolor sit amet
.align-top
Lorem ipsum dolor sit amet
.align-middle
Lorem ipsum dolor sit amet
.align-bottom
Lorem ipsum dolor sit amet
.align-text-top
Lorem ipsum dolor sit amet
.align-text-bottom
Lorem ipsum dolor sit amet

white-space, word-wrap

.whitespace-normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et viverra mauris. Nunc id consequat tortor, a tempor ante.
.whitespace-no-wrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et viverra mauris. Nunc id consequat tortor, a tempor ante.
.whitespace-pre
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et viverra mauris. Nunc id consequat tortor, a tempor ante.
.whitespace-pre-line
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et viverra mauris. Nunc id consequat tortor, a tempor ante.
.whitespace-pre-wrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et viverra mauris. Nunc id consequat tortor, a tempor ante.
.whitespace-pre-wrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et viverra mauris. Nunc id consequat tortor, a tempor ante.
.break-words
Loremipsumdolorsitametconsecteturadipiscingelit.
.break-normal
Loremipsumdolorsitametconsecteturadipiscingelit.
.truncate
Loremipsumdolorsitametconsecteturadipiscingelit.

Backgrounds

background-attachment

.bg-fixed
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.bg-local
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.bg-scroll
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

background-position

.bg-left-top
.bg-top
.bg-right-top
.bg-left
.bg-center
.bg-right
.bg-left-bottom
.bg-bottom
.bg-right-bottom

background-repeat

.bg-repeat
.bg-no-repeat
.bg-repeat-x
.bg-repeat-y

background-size

.bg-auto
.bg-cover
.bg-contain

Borders

border-style

.border-solid
.border-dashed
.border-dotted
.border-none

border-width

.border
.border-0
.border-2
.border-4
.border-8
.border-t
.border-t-0
.border-t-2
.border-t-4
.border-t-8
.border-r
.border-r-0
.border-r-2
.border-r-4
.border-r-8
.border-b
.border-b-0
.border-b-2
.border-b-4
.border-b-8
.border-l
.border-l-0
.border-l-2
.border-l-4
.border-l-8

border-radius

.rounded-none
.rounded-sm
.rounded
.rounded-lg
.rounded-full
.rounded-t-none
.rounded-r-none
.rounded-b-none
.rounded-l-none
.rounded-t-sm
.rounded-r-sm
.rounded-b-sm
.rounded-l-sm
.rounded-t
.rounded-r
.rounded-b
.rounded-l
.rounded-t-lg
.rounded-r-lg
.rounded-b-lg
.rounded-l-lg
.rounded-t-full
.rounded-r-full
.rounded-b-full
.rounded-l-full
.rounded-tl-none
.rounded-tr-none
.rounded-br-none
.rounded-bl-none
.rounded-tl-sm
.rounded-tr-sm
.rounded-br-sm
.rounded-bl-sm
.rounded-tl
.rounded-tr
.rounded-br
.rounded-bl
.rounded-tl-lg
.rounded-tr-lg
.rounded-br-lg
.rounded-bl-lg
.rounded-tl-full
.rounded-tr-full
.rounded-br-full
.rounded-bl-full

Flexbox

flex display

.flex
1
2
3
.inline-flex
1
2
3

flex direction

.flex-row
1
2
3
.flex-row-reverse
1
2
3
.flex-col
1
2
3
.flex-col-reverse
1
2
3

flex wrap

.flex-no-wrap
1
2
3
.flex-wrap
1
2
3
.flex-wrap-reverse
1
2
3

align-items

.items-stretch
1
2
3
.items-start
1
2
3
.items-center
1
2
3
.items-end
1
2
3
.items-baseline
1
2
3

align-content

.content-start
1
2
3
4
5
.content-center
1
2
3
4
5
.content-end
1
2
3
4
5
.content-between
1
2
3
4
5
.content-around
1
2
3
4
5

align-self

.self-auto
1
2
3
.self-start
1
2
3
.self-center
1
2
3
.self-end
1
2
3
.self-stretch
1
2
3

justify-content

.justify-start
1
2
3
.justify-center
1
2
3
.justify-end
1
2
3
.justify-between
1
2
3
.justify-around
1
2
3

flex, flex-grow, flex-shrink

.flex-initial

Items don't grow when there's extra space

Short
Medium length

Items shrink if possible when needed

Short
Medium length
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
.flex-1

Default behavior

Short
Medium
Significantly larger

With .flex-1

Short
Medium
Significantly larger
.flex-auto

Default behavior

Short
Medium
Significantly larger

With .flex-auto

Short
Medium
Significantly larger
.flex-none
Can grow or shrink if needed
Cannot grow or shrink
Can grow or shrink if needed
.flex-grow
Cannot flex
Item that grows
Cannot flex
.flex-no-grow
Will grow
Will not grow
Will grow
.flex-shrink
Cannot flex
Shrinks even if it causes the content to wrap
Cannot flex
.flex-no-shrink
Can shrink if needed
Cannot shrink below initial size
Can shrink if needed

Spacing

padding

.p-0
.p-2
.p-3
.p-4
.p-5
.py-0
.py-2
.py-3
.py-4
.py-5
.px-0
.px-2
.px-3
.px-4
.px-5
.pt-0
.pt-2
.pt-3
.pt-4
.pt-5
.pr-0
.pr-2
.pr-3
.pr-4
.pr-5
.pb-0
.pb-2
.pb-3
.pb-4
.pb-5
.pl-0
.pl-2
.pl-3
.pl-4
.pl-5

margin

.m-0
.m-1
.m-2
.m-3
.m-4
.my-0
.my-1
.my-2
.my-3
.my-4
.mx-0
.mx-1
.mx-2
.mx-3
.mx-4
.mt-0
.mt-1
.mt-2
.mt-3
.mt-4
.mr-0
.mr-1
.mr-2
.mr-3
.mr-4
.mb-0
.mb-1
.mb-2
.mb-3
.mb-4
.ml-0
.ml-1
.ml-2
.ml-3
.ml-4

negative margin

.-m-0
.-m-1
.-m-2
.-m-3
.-m-4
.-my-0
.-my-1
.-my-2
.-my-3
.-my-4
.-mx-0
.-mx-1
.-mx-2
.-mx-3
.-mx-4
.-mt-0
.-mt-1
.-mt-2
.-mt-3
.-mt-4
.-mr-0
.-mr-1
.-mr-4
.-mr-3
.-mr-4
.-mb-0
.-mb-1
.-mb-2
.-mb-3
.-mb-4
.-ml-0
.-ml-1
.-ml-2
.-ml-3
.-ml-4

Sizing

width

.w-px
.w-1
.w-2
.w-3
.w-4
.w-5
.w-6
.w-8
.w-10
.w-12
.w-16
.w-24
.w-32
.w-48
.w-64
.w-auto
.w-1/2
.w-1/3
.w-2/3
.w-1/4

min-width

.min-w-0	min-width: 0;
.min-w-full	min-width: 100%;
        

max-width

.max-w-xs	max-width: 20rem;
.max-w-sm	max-width: 30rem;
.max-w-md	max-width: 40rem;
.max-w-lg	max-width: 50rem;
.max-w-xl	max-width: 60rem;
.max-w-2xl	max-width: 70rem;
.max-w-3xl	max-width: 80rem;
.max-w-4xl	max-width: 90rem;
.max-w-5xl	max-width: 100rem;
.max-w-full	max-width: 100%;
        

height

.h-px
.h-1
.h-2
.h-3
.h-4
.h-6
.h-8
.h-10
.h-12
.h-16
.h-24
.h-32
.h-48
.h-64
.h-auto
.h-full
.h-screen

min-height

.min-h-0	min-height: 0;
.min-h-full	min-height: 100%;
.min-h-screen	min-height: 100vh;
        

max-height

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

Tables

border-collapse

.border-collapse
.border-separate

Interactivity

cursor

.cursor-auto
.cursor-default
.cursor-pointer
.cursor-wait
.cursor-move
.cursor-not-allowed

pointer-events

Example Link (.pointer-events-auto)

Example Link (.pointer-events-none)

resize

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

user-select

.select-text
(This text is selectable.)
.select-none
(This text is not selectable.)

Miscellaneous

appearance

.appearance-none
Not sure how to show

box-shadow

.shadow
.shadow-md
.shadow-lg
.shadow-inner
.shadow-outline
.shadow-none

opacity

.opacity-100
.opacity-75
.opacity-50
.opacity-25
.opacity-0

outline

.outline-none

svg

.fill-current
.stroke-current

Color

color, background-color, border-color

.bg-transparent transparent .border-transparent .text-transparent .text-transparent
.bg-white #ffffff .border-white .text-white .text-white
.bg-black #22292f .border-black .text-black .text-black
.bg-grey-lightest #F8FAFC .border-grey-lightest .text-grey-lightest .text-grey-lightest
.bg-grey-lighter #F1F5F8 .border-grey-lighter .text-grey-lighter .text-grey-lighter
.bg-grey-light #DAE1E7 .border-grey-light .text-grey-light .text-grey-light
.bg-grey #B8C2CC .border-grey .text-grey .text-grey
.bg-grey-dark #8795A1 .border-grey-dark .text-grey-dark .text-grey-dark
.bg-grey-darker #606F7B .border-grey-darker .text-grey-darker .text-grey-darker
.bg-grey-darkest #3D4852 .border-grey-darkest .text-grey-darkest .text-grey-darkest
.bg-red-lightest #FCEBEA .border-red-lightest .text-red-lightest .text-red-lightest
.bg-red-lighter #F9ACAA .border-red-lighter .text-red-lighter .text-red-lighter
.bg-red-light #EF5753 .border-red-light .text-red-light .text-red-light
.bg-red #E3342F .border-red .text-red .text-red
.bg-red-dark #CC1F1A .border-red-dark .text-red-dark .text-red-dark
.bg-red-darker #621B18 .border-red-darker .text-red-darker .text-red-darker
.bg-red-darkest #3B0D0C .border-red-darkest .text-red-darkest .text-red-darkest
.bg-orange-lightest #FFF5EB .border-orange-lightest .text-orange-lightest .text-orange-lightest
.bg-orange-lighter #FCD9B6 .border-orange-lighter .text-orange-lighter .text-orange-lighter
.bg-orange-light #FAAD63 .border-orange-light .text-orange-light .text-orange-light
.bg-orange #F6993F .border-orange .text-orange .text-orange
.bg-orange-dark #DE751F .border-orange-dark .text-orange-dark .text-orange-dark
.bg-orange-darker #613B1F .border-orange-darker .text-orange-darker .text-orange-darker
.bg-orange-darkest #462A16 .border-orange-darkest .text-orange-darkest .text-orange-darkest
.bg-yellow-lightest #FCFBEB .border-yellow-lightest .text-yellow-lightest .text-yellow-lightest
.bg-yellow-lighter #FFF9C2 .border-yellow-lighter .text-yellow-lighter .text-yellow-lighter
.bg-yellow-light #FFF382 .border-yellow-light .text-yellow-light .text-yellow-light
.bg-yellow #FFED4A .border-yellow .text-yellow .text-yellow
.bg-yellow-dark #F2D024 .border-yellow-dark .text-yellow-dark .text-yellow-dark
.bg-yellow-darker #684F1D .border-yellow-darker .text-yellow-darker .text-yellow-darker
.bg-yellow-darkest #453411 .border-yellow-darkest .text-yellow-darkest .text-yellow-darkest
.bg-green-lightest #E3FCEC .border-green-lightest .text-green-lightest .text-green-lightest
.bg-green-lighter #A2F5BF .border-green-lighter .text-green-lighter .text-green-lighter
.bg-green-light #51D88A .border-green-light .text-green-light .text-green-light
.bg-green #38C172 .border-green .text-green .text-green
.bg-green-dark #1F9D55 .border-green-dark .text-green-dark .text-green-dark
.bg-green-darker #1A4731 .border-green-darker .text-green-darker .text-green-darker
.bg-green-darkest #0F2F21 .border-green-darkest .text-green-darkest .text-green-darkest
.bg-teal-lightest #E8FFFE .border-teal-lightest .text-teal-lightest .text-teal-lightest
.bg-teal-lighter #A0F0ED .border-teal-lighter .text-teal-lighter .text-teal-lighter
.bg-teal-light #64D5CA .border-teal-light .text-teal-light .text-teal-light
.bg-teal #4DC0B5 .border-teal .text-teal .text-teal
.bg-teal-dark #38A89D .border-teal-dark .text-teal-dark .text-teal-dark
.bg-teal-darker #20504F .border-teal-darker .text-teal-darker .text-teal-darker
.bg-teal-darkest #0D3331 .border-teal-darkest .text-teal-darkest .text-teal-darkest
.bg-blue-lightest #EFF8FF .border-blue-lightest .text-blue-lightest .text-blue-lightest
.bg-blue-lighter #BCDEFA .border-blue-lighter .text-blue-lighter .text-blue-lighter
.bg-blue-light #6CB2EB .border-blue-light .text-blue-light .text-blue-light
.bg-blue #3490DC .border-blue .text-blue .text-blue
.bg-blue-dark #2779BD .border-blue-dark .text-blue-dark .text-blue-dark
.bg-blue-darker #1C3D5A .border-blue-darker .text-blue-darker .text-blue-darker
.bg-blue-darkest #12283A .border-blue-darkest .text-blue-darkest .text-blue-darkest
.bg-indigo-lightest #E6E8FF .border-indigo-lightest .text-indigo-lightest .text-indigo-lightest
.bg-indigo-lighter #B2B7FF .border-indigo-lighter .text-indigo-lighter .text-indigo-lighter
.bg-indigo-light #7886D7 .border-indigo-light .text-indigo-light .text-indigo-light
.bg-indigo #6574CD .border-indigo .text-indigo .text-indigo
.bg-indigo-dark #5661B3 .border-indigo-dark .text-indigo-dark .text-indigo-dark
.bg-indigo-darker #2F365F .border-indigo-darker .text-indigo-darker .text-indigo-darker
.bg-indigo-darkest #191E38 .border-indigo-darkest .text-indigo-darkest .text-indigo-darkest
.bg-purple-lightest #F3EBFF .border-purple-lightest .text-purple-lightest .text-purple-lightest
.bg-purple-lighter #F3EBFF .border-purple-lighter .text-purple-lighter .text-purple-lighter
.bg-purple-light #A779E9 .border-purple-light .text-purple-light .text-purple-light
.bg-purple #9561E2 .border-purple .text-purple .text-purple
.bg-purple-dark #794ACF .border-purple-dark .text-purple-dark .text-purple-dark
.bg-purple-darker #382B5F .border-purple-darker .text-purple-darker .text-purple-darker
.bg-purple-darkest #21183C .border-purple-darkest .text-purple-darkest .text-purple-darkest
.bg-pink-lightest #FFEBEF .border-pink-lightest .text-pink-lightest .text-pink-lightest
.bg-pink-lighter #FFBBCA .border-pink-lighter .text-pink-lighter .text-pink-lighter
.bg-pink-light #FA7EA8 .border-pink-light .text-pink-light .text-pink-light
.bg-pink #F66D9B .border-pink .text-pink .text-pink
.bg-pink-dark #EB5286 .border-pink-dark .text-pink-dark .text-pink-dark
.bg-pink-darker #6F213F .border-pink-darker .text-pink-darker .text-pink-darker
.bg-pink-darkest #451225 .border-pink-darkest .text-pink-darkest .text-pink-darkest