Tailwind CSS Cheat Sheet

container mx-auto px-4

block | inline-block | inline | flex | grid | hidden | contents

static | relative | absolute | fixed | sticky

top-0 right-0 bottom-0 left-0
inset-0           /* all four */
inset-x-0  inset-y-0
top-1/2 left-1/2  -translate-x-1/2 -translate-y-1/2

z-0 | z-10 | z-20 | z-50 | z-auto | z-[100]

overflow-hidden | overflow-auto | overflow-scroll | overflow-x-auto

object-cover | object-contain | object-center | object-top

visible | invisible | collapse

isolate | isolation-auto

flex-row | flex-row-reverse | flex-col | flex-col-reverse

flex-wrap | flex-nowrap | flex-wrap-reverse

justify-start | justify-center | justify-end
justify-between | justify-around | justify-evenly

items-start | items-center | items-end | items-stretch | items-baseline

content-start | content-center | content-between | content-around

flex-1 | flex-auto | flex-initial | flex-none
basis-1/2 | basis-64
grow | grow-0 | shrink | shrink-0

order-1 | order-first | order-last | -order-1

self-start | self-center | self-end | self-stretch

gap-4 | gap-x-2 | gap-y-4 | gap-[14px]

grid grid-cols-3 | grid-cols-12 | grid-cols-[200px_1fr]

grid-rows-3 | grid-rows-[auto_1fr_auto]

col-span-2 | col-span-full | row-span-3

col-start-2 col-end-4 | row-start-1 row-end-3

grid-flow-row | grid-flow-col | grid-flow-dense

auto-cols-min | auto-cols-max | auto-rows-fr

place-items-center | place-content-center | place-self-center

p-4 | px-4 py-2 | pt-0 pr-2 pb-4 pl-1
p-[14px]

m-4 | mx-auto | my-2 | mb-8 | -mt-4
m-[10px]

space-x-4 | space-y-4 | space-x-reverse

divide-x divide-y | divide-slate-200 | divide-x-2

w-4 | w-1/2 | w-full | w-screen | w-fit | w-min | w-max | w-[420px]

min-w-0 | min-w-full | min-w-[20rem]
max-w-xs ... max-w-7xl | max-w-screen-xl | max-w-prose

h-4 | h-full | h-screen | h-dvh | h-[480px]

min-h-0 | min-h-screen | min-h-dvh
max-h-screen | max-h-[80vh]

aspect-square | aspect-video | aspect-[4/3]

font-sans | font-serif | font-mono

text-xs text-sm text-base text-lg
text-xl text-2xl ... text-9xl
text-[15px]

font-thin | font-light | font-normal | font-medium
font-semibold | font-bold | font-extrabold | font-black

italic | not-italic
uppercase | lowercase | capitalize | normal-case
antialiased | subpixel-antialiased

text-slate-900 | text-blue-500 | text-white
text-[#4f46e5]

text-left | text-center | text-right | text-justify

leading-none | leading-tight | leading-relaxed | leading-[1.7]
tracking-tight | tracking-wide | tracking-[0.2em]

underline | line-through | no-underline
decoration-blue-500 | decoration-wavy | decoration-2
underline-offset-4

truncate              /* one line */
line-clamp-2          /* multi-line */

bg-white | bg-slate-900 | bg-blue-500
bg-blue-500/50        /* 50% opacity */
bg-[#4f46e5]

bg-gradient-to-r | bg-gradient-to-br | bg-gradient-to-tl
from-blue-500 via-purple-500 to-pink-500

bg-[url("/hero.jpg")]
bg-cover | bg-contain | bg-center | bg-no-repeat | bg-fixed

border | border-2 | border-4 | border-0
border-x | border-y | border-t | border-b
border-l-2 | border-r-4

border-slate-200 | border-blue-500 | border-transparent

border-solid | border-dashed | border-dotted | border-double | border-none

rounded | rounded-md | rounded-lg | rounded-xl | rounded-2xl | rounded-full
rounded-t-lg | rounded-tr-2xl | rounded-[14px]

outline-none | outline | outline-2
outline-blue-500 | outline-offset-2

ring | ring-2 | ring-4
ring-blue-500 | ring-blue-500/40
ring-offset-2 | ring-inset

shadow | shadow-sm | shadow-md | shadow-lg | shadow-xl | shadow-2xl
shadow-none | shadow-inner
shadow-blue-500/20

opacity-0 | opacity-50 | opacity-75 | opacity-100

mix-blend-multiply | mix-blend-overlay | mix-blend-difference

bg-blend-multiply | bg-blend-overlay

blur-sm | blur-md | blur-lg | blur-2xl
brightness-50 | brightness-110
contrast-125
grayscale | grayscale-0
saturate-150
hue-rotate-90

drop-shadow-sm | drop-shadow-md | drop-shadow-xl

backdrop-blur-md | backdrop-blur-lg
backdrop-brightness-50
backdrop-saturate-150

transition | transition-all | transition-none
transition-colors | transition-opacity | transition-transform

duration-75 | duration-150 | duration-300 | duration-700 | duration-1000

ease-linear | ease-in | ease-out | ease-in-out

delay-100 | delay-300 | delay-500

animate-spin | animate-ping | animate-pulse | animate-bounce | animate-none

// tailwind.config.js
extend: {
  keyframes: {
    fadeIn: { '0%': {opacity:0}, '100%': {opacity:1} }
  },
  animation: { fadeIn: 'fadeIn 0.5s ease-out' }
}

// Use:
animate-[fadeIn]

scale-50 | scale-100 | scale-110 | scale-150
scale-x-50 | scale-y-110

rotate-3 | rotate-45 | rotate-90 | -rotate-12

translate-x-1 | translate-x-1/2 | translate-x-full
translate-y-2 | -translate-y-4

skew-x-3 | skew-y-6 | -skew-y-3

origin-center | origin-top-left | origin-bottom-right

cursor-pointer | cursor-not-allowed | cursor-grab | cursor-wait

select-none | select-text | select-all | select-auto

pointer-events-none | pointer-events-auto

resize-none | resize-x | resize-y | resize

snap-x snap-mandatory
snap-start | snap-center | snap-end

caret-blue-500 | accent-blue-500

hover:bg-blue-600
focus:ring-2
active:scale-95
focus-visible:outline-2

disabled:opacity-50
checked:bg-blue-500
invalid:border-red-500
placeholder:text-slate-400
file:bg-blue-500

first:rounded-t-lg
last:border-b-0
odd:bg-slate-50
even:bg-white
empty:hidden

<div class="group">
  <p class="group-hover:text-blue-500">...</p>
</div>

<input class="peer" />
<p class="peer-focus:text-blue-500">...</p>

sm:  ≥ 640px
md:  ≥ 768px
lg:  ≥ 1024px
xl:  ≥ 1280px
2xl: ≥ 1536px

text-sm md:text-base lg:text-lg
flex-col md:flex-row
hidden lg:block
p-4 sm:p-6 lg:p-10

max-md:hidden    /* hide ≥ md */
max-lg:p-2       /* below lg */

bg-white dark:bg-slate-900
text-slate-900 dark:text-white
border-slate-200 dark:border-slate-800

// tailwind.config.js
darkMode: 'class'   // toggle .dark on <html>
darkMode: 'media'   // follow system

w-[420px]
p-[14px]
bg-[#4f46e5]
text-[15px]
grid-cols-[200px_1fr_auto]

bg-[--brand]
text-[color:var(--text)]

!w-full           /* important variant */

@container/sidebar
@md:flex-row
@lg:p-6