Tailwind CSS
Here is a very small selection of useful tailwind classes.
Flexbox vs. Grid: when to use which
- Flexbox (
flex): layout in one dimension — a single row or a single column. Use for navbars, button groups, card footers, or any time items flow in one direction. - Grid (
grid): layout in two dimensions — rows and columns simultaneously. Use for page layouts, dashboards, image galleries, or any time you need items aligned on both axes.
flex vs. grid rule of thumb
- If you're arranging items along one axis, use flex.
- If you need to control placement on both axes, use grid.
Flexbox
flex creates a one-dimensional container. Items are laid out along a single
main axis — horizontal by default.
Terminology
| Term | Meaning |
|---|---|
| Main axis | The direction items flow (flex-row = horizontal, flex-col = vertical) |
| Cross axis | The perpendicular axis |
justify-* | Align along the main axis |
items-* | Align along the cross axis |
Direction
| Class | Main axis | Items flow |
|---|---|---|
flex-row (default) | horizontal → | left to right |
flex-row-reverse | horizontal ← | right to left |
flex-col | vertical ↓ | top to bottom |
flex-col-reverse | vertical ↑ | bottom to top |
Alignment
Because justify-* and items-* follow the main axis, their visual effect
depends on direction:
| Goal | flex-row | flex-col |
|---|---|---|
| Horizontal alignment | justify-{start,center,end,between} | items-{start,center,end} |
| Vertical alignment | items-{start,center,end} | justify-{start,center,end,between} |
Common combo — center both axes: flex items-center justify-center
Wrapping and gaps
| Class | Effect |
|---|---|
flex-wrap | Allow items to wrap to the next line |
gap-{n} | Uniform gap between items |
Grid
grid creates a two-dimensional container. You define columns (and optionally rows)
explicitly.
Terminology
| Term | Meaning |
|---|---|
| Columns / rows | The explicit tracks you define |
justify-items-* | Align each item horizontally within its cell |
items-* | Align each item vertically within its cell |
justify-* (on container) | Distribute columns horizontally within the grid |
content-* | Distribute rows vertically within the grid |
Defining the grid
| Class | Effect |
|---|---|
grid-cols-{n} | Equal-width columns (e.g. grid-cols-3) |
grid-rows-{n} | Explicit row count |
gap-{n} | Uniform gap between cells |
gap-x-{n} / gap-y-{n} | Axis-specific gaps |
Alignment
In grid, the axes are always horizontal and vertical — they don't swap like in flex.
| Goal | Class |
|---|---|
| Center items horizontally in cells | justify-items-center |
| Center items vertically in cells | items-center |
| Center the whole grid horizontally | justify-center |
| Center the whole grid vertically | content-center |
| Center everything | place-items-center (shorthand) |
Spanning
| Class | Effect |
|---|---|
col-span-{n} | Item spans n columns |
row-span-{n} | Item spans n rows |
Flexbox vs. Grid alignment cheat sheet
| Goal | Flexbox (flex-row) | Flexbox (flex-col) | Grid |
|---|---|---|---|
| Horizontal center | justify-center | items-center | justify-items-center |
| Vertical center | items-center | justify-center | items-center |
| Center both | items-center justify-center | items-center justify-center | place-items-center |
| Space items apart | justify-between | justify-between | n/a (use gap-{n}) |
Character spacing
tracking-* controls letter-spacing:
| Class | Value |
|---|---|
tracking-tighter | -0.05em |
tracking-tight | -0.025em |
tracking-normal | 0em |
tracking-wide | 0.025em |
tracking-wider | 0.05em |
tracking-widest | 0.1em |
Arbitrary values: tracking-[0.2em]
Line height
leading-* controls line-height:
| Class | Value |
|---|---|
leading-none | 1 |
leading-tight | 1.25 |
leading-snug | 1.375 |
leading-normal | 1.5 |
leading-relaxed | 1.625 |
leading-loose | 2 |
Fixed values (useful for precise control): leading-{n} where n is a spacing scale
value (e.g. leading-6 = 1.5rem / 24px).
Arbitrary values: leading-[1.8]