Skip to main content

Tailwind CSS Cheatsheet

Layout Fundamentals​

Container & Display​

container         // Wrapper with responsive max-width
block            // display: block
inline-block     // display: inline-block
inline          // display: inline
flex            // display: flex
grid            // display: grid
hidden          // display: none

Flexbox​

/* Flex Direction */
flex-row         // flex-direction: row
flex-col         // flex-direction: column
flex-wrap        // flex-wrap: wrap

/* Justify Content (horizontal) */
justify-start    // justify-content: flex-start
justify-end      // justify-content: flex-end
justify-center   // justify-content: center
justify-between  // justify-content: space-between
justify-around   // justify-content: space-around

/* Align Items (vertical) */
items-start      // align-items: flex-start
items-end        // align-items: flex-end
items-center     // align-items: center
items-stretch    // align-items: stretch

/* Individual Item Alignment */
self-start       // align-self: flex-start
self-end         // align-self: flex-end
self-center      // align-self: center

Grid​

/* Grid Template */
grid-cols-{n}    // grid-template-columns: repeat(n, minmax(0, 1fr))
grid-rows-{n}    // grid-template-rows: repeat(n, minmax(0, 1fr))

/* Grid Column Span */
col-span-{n}     // grid-column: span n / span n
col-start-{n}    // grid-column-start: n
col-end-{n}      // grid-column-end: n

/* Grid Gap */
gap-{size}       // gap: size
gap-x-{size}     // column-gap: size
gap-y-{size}     // row-gap: size

Spacing & Sizing​

Margin​

m-{size}         // margin: size
mt-{size}        // margin-top: size
mr-{size}        // margin-right: size
mb-{size}        // margin-bottom: size
ml-{size}        // margin-left: size
mx-{size}        // margin-left & margin-right
my-{size}        // margin-top & margin-bottom

Padding​

p-{size}         // padding: size
pt-{size}        // padding-top: size
pr-{size}        // padding-right: size
pb-{size}        // padding-bottom: size
pl-{size}        // padding-left: size
px-{size}        // padding-left & padding-right
py-{size}        // padding-top & padding-bottom

Width & Height​

w-{size}         // width: size
h-{size}         // height: size
min-w-{size}     // min-width: size
min-h-{size}     // min-height: size
max-w-{size}     // max-width: size
max-h-{size}     // max-height: size

/* Percentage Width */
w-1/2            // width: 50%
w-1/3            // width: 33.333333%
w-2/3            // width: 66.666667%
w-full           // width: 100%

Typography​

Font Family​

font-sans        // font-family: system-ui, sans-serif
font-serif       // font-family: serif
font-mono        // font-family: monospace

Font Size​

text-xs          // font-size: 0.75rem
text-sm          // font-size: 0.875rem
text-base        // font-size: 1rem
text-lg          // font-size: 1.125rem
text-xl          // font-size: 1.25rem
text-2xl         // font-size: 1.5rem

Font Weight​

font-thin        // font-weight: 100
font-normal      // font-weight: 400
font-medium      // font-weight: 500
font-semibold    // font-weight: 600
font-bold        // font-weight: 700

Text Alignment​

text-left        // text-align: left
text-center      // text-align: center
text-right       // text-align: right
text-justify     // text-align: justify

Colors & Backgrounds​

Text Colors​

text-{color}-{shade}  // color: {color}
text-white            // color: white
text-black            // color: black
text-transparent      // color: transparent

Background Colors​

bg-{color}-{shade}    // background-color: {color}
bg-white             // background-color: white
bg-black             // background-color: black
bg-transparent       // background-color: transparent

Border Colors​

border-{color}-{shade}  // border-color: {color}
border-white           // border-color: white
border-black           // border-color: black
border-transparent     // border-color: transparent

Borders & Rounded Corners​

Border Width​

border          // border-width: 1px
border-0        // border-width: 0
border-2        // border-width: 2px
border-4        // border-width: 4px
border-8        // border-width: 8px

Border Radius​

rounded-none    // border-radius: 0
rounded-sm      // border-radius: 0.125rem
rounded         // border-radius: 0.25rem
rounded-md      // border-radius: 0.375rem
rounded-lg      // border-radius: 0.5rem
rounded-full    // border-radius: 9999px

Effects & Filters​

Box Shadow​

shadow-sm       // box-shadow: small
shadow          // box-shadow: medium
shadow-md       // box-shadow: medium-large
shadow-lg       // box-shadow: large
shadow-xl       // box-shadow: extra-large
shadow-none     // box-shadow: none

Opacity​

opacity-0       // opacity: 0
opacity-25      // opacity: 0.25
opacity-50      // opacity: 0.5
opacity-75      // opacity: 0.75
opacity-100     // opacity: 1

Responsive Design​

Breakpoints​

sm:             // @media (min-width: 640px)
md:             // @media (min-width: 768px)
lg:             // @media (min-width: 1024px)
xl:             // @media (min-width: 1280px)
2xl:            // @media (min-width: 1536px)

/* Example */
sm:flex         // flex display on small screens and up
md:hidden       // hidden on medium screens and up

States & Variants​

Hover, Focus, & Active States​

hover:          // :hover
focus:          // :focus
active:         // :active
disabled:       // :disabled

/* Example */
hover:bg-blue-600    // background changes on hover
focus:outline-none   // removes outline on focus

Dark Mode​

dark:           // @media (prefers-color-scheme: dark)

/* Example */
dark:bg-gray-800     // dark background in dark mode
dark:text-white      // white text in dark mode