.block
.inline-block
.inline
.hidden
.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
.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
.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.
.static
.fixed
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
.sticky
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.
Absolute positioning from center
.pin
<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
.text-xs
.text-sm
.text-base
.text-lg
.text-xl
.text-2xl
.text-3xl
.text-4xl
.text-5xl
.font-sans
.font-serif
.font-mono
.font-hairline
.font-thin
.font-light
.font-normal
.font-medium
.font-semibold
.font-bold
.font-extrabold
.font-black
.tracking-tight
.tracking-normal
.tracking-wide
.leading-none
.leading-tight
.leading-normal
.leading-loose
.list-reset
.italic
.roman
.uppercase
.lowercase
.capitalize
.normal-case
.underline
.line-through
.no-underline
.antialiased
.subpixel-antialiased
.whitespace-normal
.whitespace-no-wrap
.whitespace-pre
.whitespace-pre-line
.whitespace-pre-wrap
.whitespace-pre-wrap
.break-words
.break-normal
.truncate
.bg-fixed
.bg-local
.bg-scroll
.bg-left-top
.bg-top
.bg-right-top
.bg-left
.bg-center
.bg-right
.bg-left-bottom
.bg-bottom
.bg-right-bottom
.border-solid
.border-dashed
.border-dotted
.border-none
.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
.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
.items-stretch
.items-start
.items-center
.items-end
.items-baseline
.content-start
.content-center
.content-end
.content-between
.content-around
.self-auto
.self-start
.self-center
.self-end
.self-stretch
.justify-start
.justify-center
.justify-end
.justify-between
.justify-around
.flex-initial
Items don't grow when there's extra space
Items shrink if possible when needed
.flex-1
Default behavior
With
.flex-1
.flex-auto
Default behavior
With
.flex-auto
.flex-none
.flex-grow
.flex-no-grow
.flex-shrink
.flex-no-shrink
.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
.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
.-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
.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-w-0 min-width: 0; .min-w-full min-width: 100%;
.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%;
.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-h-0 min-height: 0; .min-h-full min-height: 100%; .min-h-screen min-height: 100vh;
.max-h-full max-height: 100%; .max-h-screen max-height: 100vh;
.border-collapse
.border-separate
.cursor-auto
.cursor-default
.cursor-pointer
.cursor-wait
.cursor-move
.cursor-not-allowed
Example Link (.pointer-events-auto)
Example Link (.pointer-events-none)
.resize-none resize: none; .resize resize: both; .resize-y resize: vertical; .resize-x resize: horizontal;
.select-text
.select-none
.appearance-none
.shadow
.shadow-md
.shadow-lg
.shadow-inner
.shadow-outline
.shadow-none
.opacity-100
.opacity-75
.opacity-50
.opacity-25
.opacity-0
.outline-none
.fill-current
.stroke-current
.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 |