Layout
| Utility Class |
Description |
| container |
Centers the content. |
|
block / inline-block
|
Block-level or inline-block. |
|
flex / grid
|
Flexbox or Grid layout. |
|
flex-col / flex-row
|
Flex direction column/row. |
| items-center |
Align items vertically. |
| justify-center |
Align items horizontally. |
|
gap-1 - gap-12
|
Spacing between items. |
Spacing
| Utility Class |
Description |
| m-{size} |
Margin: mt, mb, ml, mr. |
| p-{size} |
Padding: pt, pb, pl, pr. |
|
{size} options |
0, px, 1 - 96, etc. |
Typography
| Utility Class |
Description |
| text-{size} |
Font size (e.g., text-sm). |
| font-bold |
Bold text. |
| font-medium |
Medium text. |
| font-light |
Light text. |
|
text-left / text-center / text-right
|
Text alignment. |
| text-gray-500 |
Text color. |
Background
| Utility Class |
Description |
| bg-{color} |
Background color. |
| bg-gradient-to-r |
Gradient from left to right. |
| bg-opacity-{value} |
Background transparency. |
Borders
| Utility Class |
Description |
| border |
Default border width. |
| border-{color} |
Border color. |
|
rounded / rounded-{size}
|
Rounded corners. |
Shadows
| Utility Class |
Description |
| shadow-sm |
Small shadow. |
| shadow-md |
Medium shadow. |
| shadow-lg |
Large shadow. |
| shadow-none |
No shadow. |
Sizing
| Utility Class |
Description |
|
w-{size} / h-{size}
|
Width/Height (full, auto, percentages). |
| max-w-{size} |
Maximum width. |
| min-h-{size} |
Minimum height. |
Flexbox Alignment
| Utility Class |
Description |
| justify-start |
Align items at the start. |
| justify-between |
Space between items. |
| items-start |
Align items top. |
Positioning
| Utility Class |
Description |
|
absolute / relative
|
Positioning modes. |
|
top-{value} / left-{value}
|
Offset values. |
| z-{value} |
Z-index (stacking). |
Colors
| Class Examples |
Description |
| text-blue-500 |
Blue text color. |
| bg-green-300 |
Green background color. |
| border-red-400 |
Red border color. |
Transitions & Animation
The above is the detailed content of Tailwind CSS Cheatsheet. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
