Layout
Consistent use of a grid and spacing makes it easier for your users to scan the user interface and grasp the content.
Spacing
Horizontal and vertical rhythm plays a big role in a layout. Use these design tokens for adding space between interface elements.
| Preview | Description | Use |
|---|---|---|
|
0Add description |
Example: mr-0 will give margin-right: 0; | |
|
PixelAdd description |
Example: mr-px will give margin-right: 1px; | |
|
1Add description |
Example: mr-1 will give margin-right: 0.5rem; | |
|
2Add description |
Example: mr-2 will give margin-right: 1rem; | |
|
3Add description |
Example: mr-3 will give margin-right: 1.5rem; | |
|
4Add description |
Example: mr-4 will give margin-right: 2rem; | |
|
5Add description |
Example: mr-5 will give margin-right: 4rem; |
Grid
Tailwind CSS Grid is used. (.grid). Gaps between columns use spacing token values.