TailwindCSS Cheat Sheet

<div class="flex items-center justify-between gap-4">
  <div class="flex-1">Left</div>
  <div class="flex-shrink-0">Right</div>
</div>

<div class="flex flex-col md:flex-row gap-6">

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="col-span-2">Wide</div>
  <div>Normal</div>
</div>

<div class="container mx-auto px-4 max-w-7xl">
  <!-- Centered content -->
</div>

<div class="relative">
  <div class="absolute top-0 right-0">Badge</div>
  <div class="sticky top-4">Sidebar</div>
  <div class="fixed bottom-4 right-4">FAB</div>
</div>

p-4    /* 1rem all sides */
px-6   /* 1.5rem horizontal */
py-2   /* 0.5rem vertical */
mt-8   /* 2rem top margin */
mx-auto /* center horizontally */
space-y-4 /* gap between children */

w-full   /* 100% */
w-1/2    /* 50% */
w-screen /* 100vw */
max-w-lg /* 32rem */
h-64     /* 16rem */
min-h-screen /* 100vh */
aspect-video /* 16/9 */

text-sm / text-base / text-lg / text-xl / text-2xl
font-light / font-normal / font-medium / font-semibold / font-bold
leading-tight / leading-relaxed
tracking-wide

text-gray-900 dark:text-gray-100
text-center / text-left / text-right
truncate          /* overflow ellipsis */
line-clamp-3      /* max 3 lines */
underline decoration-2 decoration-blue-500

bg-white dark:bg-gray-900
bg-blue-500 hover:bg-blue-600
bg-opacity-75
bg-gradient-to-r from-blue-500 to-purple-600

opacity-50
bg-black/50      /* bg with 50% opacity */
text-white/80    /* text with 80% opacity */
mix-blend-multiply

border border-gray-200
border-b-2 border-blue-500
rounded-lg / rounded-full / rounded-none
divide-y divide-gray-200

shadow-sm / shadow / shadow-md / shadow-lg / shadow-xl
ring-2 ring-blue-500 ring-offset-2
outline-none focus:ring-2 focus:ring-blue-500

sm:  /* >= 640px  */
md:  /* >= 768px  */
lg:  /* >= 1024px */
xl:  /* >= 1280px */
2xl: /* >= 1536px */

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">

<div class="hidden md:block">Desktop only</div>
<div class="md:hidden">Mobile only</div>

hover:bg-blue-600
focus:outline-none focus:ring-2
active:scale-95
disabled:opacity-50 disabled:cursor-not-allowed
group-hover:visible
peer-invalid:text-red-500

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <p class="text-gray-600 dark:text-gray-400">Subtitle</p>
</div>

transition duration-300 ease-in-out
hover:scale-105 transition-transform
transition-colors duration-200
transition-opacity

animate-spin     /* loading spinner */
animate-ping     /* notification dot */
animate-pulse    /* skeleton loader */
animate-bounce   /* scroll indicator */