Utility Classes
Flexbox Layout
Display Flex
<div class="flex">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Flex Direction
flex-row
Items arranged horizontally in a row (default behavior)
<div class="flex flex-row">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
flex-col
Items stacked vertically in a column
<div class="flex flex-col">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Justify Content
justify-start
Items aligned to the start of the container
<div class="flex justify-start">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
justify-center
Items centered in the container
<div class="flex justify-center">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
justify-end
Items aligned to the end of the container
<div class="flex justify-end">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
justify-between
Items evenly distributed with first item at start and last item at end
<div class="flex justify-between">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
justify-around
Items evenly distributed with equal space around each item
<div class="flex justify-around">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Align Items
items-start
Items aligned to the start of the cross axis
<div class="flex items-start">
<div>Item 1</div>
<div style="height: 100px;">Tall Item</div>
<div>Item 3</div>
</div>
items-center
Items centered along the cross axis
<div class="flex items-center">
<div>Item 1</div>
<div style="height: 100px;">Tall Item</div>
<div>Item 3</div>
</div>
items-end
Items aligned to the end of the cross axis
<div class="flex items-end">
<div>Item 1</div>
<div style="height: 100px;">Tall Item</div>
<div>Item 3</div>
</div>
Flex Wrap
Items wrap to next line when they run out of space
<div class="flex flex-wrap">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
</div>
Grid Layout
Basic Grid
Grid with 3 equal-width columns
<div class="grid grid-cols-3 gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>
Column Spans
Control how many columns an element spans
<div class="grid grid-cols-4 gap-4">
<div class="col-span-2">col-span-2</div>
<div class="col-span-2">col-span-2</div>
<div class="col-span-1">col-span-1</div>
<div class="col-span-3">col-span-3</div>
</div>
Spacing Utilities
Margin
Margin utilities for adding space around elements (0, 0.25rem, 0.5rem, 1rem, 2rem)
<div class="m-0">m-0</div>
<div class="m-1">m-1</div>
<div class="m-2">m-2</div>
<div class="m-4">m-4</div>
<div class="m-8">m-8</div>
Padding
Padding utilities for adding space inside elements (0, 0.25rem, 0.5rem, 1rem, 2rem)
<div class="p-0">p-0</div>
<div class="p-1">p-1</div>
<div class="p-2">p-2</div>
<div class="p-4">p-4</div>
<div class="p-8">p-8</div>
Display Utilities
Display Types
Change how an element is displayed
<div class="block">display: block</div>
<div class="inline-block">display: inline-block</div>
<div class="inline">display: inline</div>
<div class="flex">display: flex</div>
<div class="grid">display: grid</div>
Border Utilities
Utilities for adding borders to elements
<div class="border">border (all sides)</div>
<div class="border-t">border-t (top only)</div>
<div class="border-r">border-r (right only)</div>
<div class="border-b">border-b (bottom only)</div>
<div class="border-l">border-l (left only)</div>
rounded, rounded-lg, rounded-full
Utilities for controlling border radius
<div class="rounded">rounded</div>
<div class="rounded-lg">rounded-lg</div>
<div class="rounded-full">rounded-full</div>
Responsive Utilities
Container / Card
Container makes stuff full width. Card gives it a border and bg
This container adapts to different screen sizes (resize browser)
<div class="container card">
<p>Content here</p>
</div>
Responsive Display
Apply styles at specific breakpoints (sm: 640px, md: 768px, lg: 1024px)
<div class="hidden md:block">Hidden on small screens, visible from medium screens</div>
<div class="block md:hidden">Visible on small screens, hidden from medium screens</div>