Utility Classes & Layout

Spacing

<!-- Padding: p-{n}, px-{n}, py-{n}, pt/pr/pb/pl-{n} -->
<div class="p-4">           <!-- padding: 16px -->
<div class="px-6 py-3">     <!-- padding-x: 24px, padding-y: 12px -->
<div class="pt-2 pb-8">     <!-- top: 8px, bottom: 32px -->

<!-- Margin: m-{n}, mx-{n}, my-{n}, mt/mr/mb/ml-{n} -->
<div class="m-4">            <!-- margin: 16px -->
<div class="mx-auto">        <!-- center horizontally -->
<div class="mt-0 mb-4">      <!-- top: 0, bottom: 16px -->
<div class="-mt-4">          <!-- negative margin: -16px -->

<!-- Space between children -->
<div class="flex gap-4">     <!-- flex gap: 16px -->
<div class="space-x-4">      <!-- margin-left on each child -->
<div class="space-y-6">      <!-- margin-top on each child -->

<!-- Scale: 0=0, 1=4px, 2=8px, 3=12px, 4=16px, 5=20px, 6=24px,
           8=32px, 10=40px, 12=48px, 16=64px, 20=80px, 24=96px -->

Flexbox

<!-- Flex container -->
<div class="flex">                    <!-- display: flex -->
<div class="inline-flex">            <!-- display: inline-flex -->
<div class="flex flex-col">          <!-- column direction -->
<div class="flex flex-row-reverse"> <!-- reverse row -->
<div class="flex flex-wrap">         <!-- allow wrapping -->
<div class="flex flex-nowrap">       <!-- no wrap -->

<!-- Alignment -->
<div class="flex items-center">      <!-- align-items: center -->
<div class="flex items-start">       <!-- flex-start -->
<div class="flex items-stretch">     <!-- stretch (default) -->
<div class="flex justify-center">    <!-- justify-content: center -->
<div class="flex justify-between">   <!-- space-between -->
<div class="flex justify-around">    <!-- space-around -->
<div class="flex justify-evenly">    <!-- space-evenly -->

<!-- Common centering pattern -->
<div class="flex items-center justify-center">

<!-- Flex children -->
<div class="flex-1">                 <!-- flex: 1 1 0% (grow and shrink) -->
<div class="flex-auto">             <!-- flex: 1 1 auto -->
<div class="flex-none">             <!-- flex: none -->
<div class="grow">                   <!-- flex-grow: 1 -->
<div class="shrink-0">              <!-- flex-shrink: 0 -->
<div class="basis-1/2">             <!-- flex-basis: 50% -->
<div class="self-end">              <!-- align-self: flex-end -->
<div class="order-first">           <!-- order: -9999 -->

Grid

<!-- Grid container -->
<div class="grid grid-cols-3 gap-4">   <!-- 3 equal columns -->
<div class="grid grid-cols-12 gap-6">  <!-- 12-column layout -->
<div class="grid grid-cols-[1fr_2fr_1fr] gap-4">  <!-- custom track sizes -->

<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

<!-- Grid children -->
<div class="col-span-2">              <!-- span 2 columns -->
<div class="col-span-full">           <!-- span all columns -->
<div class="col-start-2 col-end-4">  <!-- from col 2 to 4 -->
<div class="row-span-2">             <!-- span 2 rows -->

<!-- Auto grid -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-4">

Typography & Colors

<!-- Font size: text-xs(12) sm(14) base(16) lg(18) xl(20) 2xl(24) 3xl(30) 4xl(36) -->
<h1 class="text-4xl font-bold tracking-tight">

<!-- Font weight: thin(100) light(300) normal(400) medium(500) semibold(600) bold(700) -->
<p class="font-semibold">

<!-- Line height: leading-none(1) tight(1.25) snug(1.375) normal(1.5) relaxed(1.625) -->
<p class="leading-relaxed">

<!-- Letter spacing: tracking-tighter/tight/normal/wide/wider/widest -->
<h2 class="tracking-wide">

<!-- Text align, decoration, transform -->
<p class="text-center">
<p class="text-right">
<a class="underline decoration-blue-500">
<p class="uppercase tracking-widest">
<p class="truncate">                   <!-- overflow ellipsis, single line -->
<p class="line-clamp-3">              <!-- clamp to 3 lines -->

<!-- Colors: {property}-{color}-{shade} -->
<p class="text-gray-700 dark:text-gray-300">
<div class="bg-blue-500 hover:bg-blue-600">
<div class="border border-gray-200">
<svg class="text-red-500 fill-current">

<!-- Opacity: text-blue-500/75  bg-black/50 -->
<div class="bg-blue-500/10 text-blue-700/80">

Sizing & Positioning

<!-- Width / Height -->
<div class="w-full">      <!-- 100% -->
<div class="w-1/2">       <!-- 50% -->
<div class="w-64">        <!-- 256px (16rem) -->
<div class="w-fit">       <!-- fit-content -->
<div class="w-screen">    <!-- 100vw -->
<div class="min-w-0">     <!-- min-width: 0 (fix flex overflow) -->
<div class="max-w-sm">    <!-- max-width: 24rem (384px) -->
<div class="max-w-7xl mx-auto">  <!-- centered container -->
<div class="h-screen">    <!-- 100vh -->
<div class="min-h-screen"> <!-- fill page -->
<div class="aspect-video"> <!-- 16/9 -->
<div class="aspect-square"> <!-- 1/1 -->

<!-- Position -->
<div class="relative">
<div class="absolute inset-0">       <!-- top/right/bottom/left: 0 -->
<div class="absolute top-4 right-4"> <!-- positioned -->
<div class="fixed bottom-4 right-4"> <!-- fixed to viewport -->
<div class="sticky top-0 z-50">      <!-- sticky header -->

<!-- Display -->
<div class="hidden">                 <!-- display: none -->
<div class="block">
<span class="inline-block">
<div class="overflow-hidden">
<div class="overflow-auto">
<div class="overflow-x-auto">