| Concept | Class | Description |
|---|---|---|
| Block | block |
Full-width, starts on new line |
| Inline | inline |
Inline with text |
| Inline-Block | inline-block |
Inline + supports padding/width |
| Hidden | hidden |
Completely removes element |
| Invisible | invisible |
Hides visibility, still takes space |
| Concept | Class | Usage |
|---|---|---|
| Static | static |
Default, no positioning |
| Relative | relative |
Keeps in flow, but offsettable |
| Absolute | absolute |
Out of flow, relative to parent |
| Fixed | fixed |
Fixed to viewport |
| Sticky | sticky |
Becomes fixed after scroll threshold |
📦 Offset classes:
top-0, bottom-4, left-2, right-6inset-0 (all sides 0)| Concept | Class | Description |
|---|---|---|
| Container | flex |
Makes children flex items |
| Direction | flex-row, flex-col |
Horizontal / Vertical layout |
| Justify Content | justify-start, center, between, around, evenly |
|
| Align Items | items-start, center, end, stretch |
|
| Wrap | flex-wrap, nowrap |
Wrap items in multiple lines |
| Flex Grow/Shrink | flex-1, flex-none |
How much items expand/shrink |
📏 Gap between items: gap-2, gap-4, gap-x-6, gap-y-3
| Breakpoint | Prefix | Screen Width |
|---|---|---|
| Mobile | — | <640px |
sm: |
sm: | ≥640px |
md: |
md: | ≥768px |
lg: |
lg: | ≥1024px |
xl: |
xl: | ≥1280px |
🧩 Use it like:
<div class="block md:hidden">Mobile only</div>
<div class="text-sm md:text-xl lg:text-2xl">Responsive text</div>