Tailwind Cheat Sheet
A searchable quick reference of the most common Tailwind CSS utility classes and the CSS they generate.
Layout
| Class | CSS |
|---|---|
| block | display: block |
| inline-block | display: inline-block |
| inline | display: inline |
| flex | display: flex |
| inline-flex | display: inline-flex |
| grid | display: grid |
| hidden | display: none |
| contents | display: contents |
Position
| Class | CSS |
|---|---|
| static | position: static |
| relative | position: relative |
| absolute | position: absolute |
| fixed | position: fixed |
| sticky | position: sticky |
| top-0 | top: 0 |
| right-0 | right: 0 |
| bottom-0 | bottom: 0 |
| left-0 | left: 0 |
| inset-0 | inset: 0 |
Flexbox
| Class | CSS |
|---|---|
| flex-row | flex-direction: row |
| flex-col | flex-direction: column |
| flex-wrap | flex-wrap: wrap |
| flex-nowrap | flex-wrap: nowrap |
| justify-start | justify-content: flex-start |
| justify-center | justify-content: center |
| justify-end | justify-content: flex-end |
| justify-between | justify-content: space-between |
| items-start | align-items: flex-start |
| items-center | align-items: center |
| items-end | align-items: flex-end |
| items-stretch | align-items: stretch |
| flex-1 | flex: 1 1 0% |
| flex-auto | flex: 1 1 auto |
| flex-none | flex: none |
| grow | flex-grow: 1 |
| shrink-0 | flex-shrink: 0 |
Grid
| Class | CSS |
|---|---|
| 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)) |
| col-span-2 | grid-column: span 2 / span 2 |
| col-span-full | grid-column: 1 / -1 |
| gap-4 | gap: 1rem |
| gap-x-4 | column-gap: 1rem |
| gap-y-4 | row-gap: 1rem |
Spacing
| Class | CSS |
|---|---|
| p-0 | padding: 0 |
| p-1 | padding: 0.25rem (4px) |
| p-2 | padding: 0.5rem (8px) |
| p-4 | padding: 1rem (16px) |
| p-6 | padding: 1.5rem (24px) |
| p-8 | padding: 2rem (32px) |
| px-4 | padding-left/right: 1rem |
| py-4 | padding-top/bottom: 1rem |
| m-0 | margin: 0 |
| m-4 | margin: 1rem |
| mx-auto | margin-left/right: auto |
| mt-4 | margin-top: 1rem |
| space-x-4 | margin-left: 1rem (between children) |
Sizing
| Class | CSS |
|---|---|
| w-full | width: 100% |
| w-screen | width: 100vw |
| w-auto | width: auto |
| w-1/2 | width: 50% |
| h-full | height: 100% |
| h-screen | height: 100vh |
| min-h-screen | min-height: 100vh |
| max-w-md | max-width: 28rem |
| max-w-lg | max-width: 32rem |
| max-w-xl | max-width: 36rem |
Typography
| Class | CSS |
|---|---|
| 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 |
| text-3xl | font-size: 1.875rem |
| text-4xl | font-size: 2.25rem |
| font-normal | font-weight: 400 |
| font-medium | font-weight: 500 |
| font-semibold | font-weight: 600 |
| font-bold | font-weight: 700 |
| italic | font-style: italic |
| uppercase | text-transform: uppercase |
| lowercase | text-transform: lowercase |
| capitalize | text-transform: capitalize |
| text-left | text-align: left |
| text-center | text-align: center |
| text-right | text-align: right |
| underline | text-decoration: underline |
| line-through | text-decoration: line-through |
| leading-tight | line-height: 1.25 |
| leading-relaxed | line-height: 1.625 |
| tracking-tight | letter-spacing: -0.025em |
| tracking-wide | letter-spacing: 0.025em |
Borders
| Class | CSS |
|---|---|
| border | border-width: 1px |
| border-2 | border-width: 2px |
| border-0 | border-width: 0 |
| border-t | border-top-width: 1px |
| border-b | border-bottom-width: 1px |
| rounded | border-radius: 0.25rem |
| rounded-md | border-radius: 0.375rem |
| rounded-lg | border-radius: 0.5rem |
| rounded-xl | border-radius: 0.75rem |
| rounded-full | border-radius: 9999px |
| rounded-none | border-radius: 0 |
| border-solid | border-style: solid |
| border-dashed | border-style: dashed |
Effects
| Class | CSS |
|---|---|
| shadow-sm | box-shadow: 0 1px 2px ... |
| shadow | box-shadow: 0 1px 3px ... |
| shadow-md | box-shadow: 0 4px 6px ... |
| shadow-lg | box-shadow: 0 10px 15px ... |
| shadow-xl | box-shadow: 0 20px 25px ... |
| shadow-none | box-shadow: none |
| opacity-0 | opacity: 0 |
| opacity-50 | opacity: 0.5 |
| opacity-100 | opacity: 1 |
Transforms
| Class | CSS |
|---|---|
| scale-95 | transform: scale(0.95) |
| scale-100 | transform: scale(1) |
| scale-105 | transform: scale(1.05) |
| scale-110 | transform: scale(1.1) |
| rotate-45 | transform: rotate(45deg) |
| rotate-90 | transform: rotate(90deg) |
| rotate-180 | transform: rotate(180deg) |
| translate-x-1 | transform: translateX(0.25rem) |
| translate-y-1 | transform: translateY(0.25rem) |
| -translate-x-1/2 | transform: translateX(-50%) |
| -translate-y-1/2 | transform: translateY(-50%) |
Transitions
| Class | CSS |
|---|---|
| transition | transition: all 150ms ... |
| transition-all | transition-property: all |
| transition-colors | transition-property: color, bg, border... |
| transition-transform | transition-property: transform |
| duration-150 | transition-duration: 150ms |
| duration-200 | transition-duration: 200ms |
| duration-300 | transition-duration: 300ms |
| duration-500 | transition-duration: 500ms |
| ease-in | transition-timing: cubic-bezier(0.4, 0, 1, 1) |
| ease-out | transition-timing: cubic-bezier(0, 0, 0.2, 1) |
| ease-in-out | transition-timing: cubic-bezier(0.4, 0, 0.2, 1) |
Interactivity
| Class | CSS |
|---|---|
| cursor-pointer | cursor: pointer |
| cursor-not-allowed | cursor: not-allowed |
| select-none | user-select: none |
| select-text | user-select: text |
| pointer-events-none | pointer-events: none |
| resize-none | resize: none |
| resize | resize: both |
| overflow-hidden | overflow: hidden |
| overflow-auto | overflow: auto |
| overflow-scroll | overflow: scroll |
| whitespace-nowrap | white-space: nowrap |
| truncate | overflow: hidden; text-overflow: ellipsis; white-space: nowrap |