Home >Web Front-end >CSS Tutorial >Tailwind CSS Cheatsheet
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. |
Utility Class | Description |
---|---|
m-{size} | Margin: mt, mb, ml, mr. |
p-{size} | Padding: pt, pb, pl, pr. |
{size} options | 0, px, 1 - 96, etc. |
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. |
Utility Class | Description |
---|---|
bg-{color} | Background color. |
bg-gradient-to-r | Gradient from left to right. |
bg-opacity-{value} | Background transparency. |
Utility Class | Description |
---|---|
border | Default border width. |
border-{color} | Border color. |
rounded / rounded-{size} | Rounded corners. |
Utility Class | Description |
---|---|
shadow-sm | Small shadow. |
shadow-md | Medium shadow. |
shadow-lg | Large shadow. |
shadow-none | No shadow. |
Utility Class | Description |
---|---|
w-{size} / h-{size} | Width/Height (full, auto, percentages). |
max-w-{size} | Maximum width. |
min-h-{size} | Minimum height. |
Utility Class | Description |
---|---|
justify-start | Align items at the start. |
justify-between | Space between items. |
items-start | Align items top. |
Utility Class | Description |
---|---|
absolute / relative | Positioning modes. |
top-{value} / left-{value} | Offset values. |
z-{value} | Z-index (stacking). |
Class Examples | Description |
---|---|
text-blue-500 | Blue text color. |
bg-green-300 | Green background color. |
border-red-400 | Red border color. |
The above is the detailed content of Tailwind CSS Cheatsheet. For more information, please follow other related articles on the PHP Chinese website!