The utilities you reach for every day, on one printable page. Need the full list? See the extended cheatsheet.
p-4 / px-4 / py-4 / pt-4 / pr-4 / pb-4 / pl-4
m-4 / mx-auto / my-4 / -mt-4
gap-4 / gap-x-4 / gap-y-4
w-full / w-1/2 / w-64 / size-8
h-full / h-screen / h-dvh
max-w-2xl / min-h-screen
bg-white / bg-gray-100 / bg-blue-500
border / border-2 / border-gray-200
rounded-lg / rounded-full / rounded-t-lg
shadow-sm / shadow-md / shadow-lg
bg-slate-500 / text-red-600 / border-emerald-400
block / hidden / flex / grid
relative / absolute / inset-0 / top-0
z-10 / z-50
overflow-hidden / overflow-auto
object-cover / object-contain / object-center
scale-105 / rotate-45 / -rotate-6
translate-x-2 / -translate-y-1
cursor-pointer / cursor-not-allowed
select-none / pointer-events-none
flex / flex-col / flex-wrap
items-center / justify-between / justify-center
flex-1 / grow / shrink-0
grid grid-cols-3 gap-4
col-span-2 / row-span-2
divide-y / divide-x / divide-gray-200
text-sm / text-base / text-lg / text-xl / text-2xl
font-normal / font-medium / font-semibold / font-bold
text-center / text-left / text-right
leading-tight / leading-normal / leading-relaxed
truncate / line-clamp-2
text-gray-500 / text-black/60
hover: / focus: / disabled: / dark:
sm: / md: / lg: / xl: / 2xl:
group-hover: / peer-checked:
opacity-0 / opacity-50 / opacity-100
transition / duration-200 / ease-in-out
ring-2 / ring-offset-2 / ring-blue-500
backdrop-blur-sm / backdrop-brightness-90
imatlas.dev — made with <3