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. |
Abstand
Utility Class |
Description |
m-{size} |
Margin: mt, mb, ml, mr. |
p-{size} |
Padding: pt, pb, pl, pr. |
{size} options |
0, px, 1 - 96, etc. |
Typografie
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. |
Hintergrund
Utility Class |
Description |
bg-{color} |
Background color. |
bg-gradient-to-r |
Gradient from left to right. |
bg-opacity-{value} |
Background transparency. |
Grenzen
Utility Class |
Description |
border |
Default border width. |
border-{color} |
Border color. |
rounded / rounded-{size}
|
Rounded corners. |
Schatten
Utility Class |
Description |
shadow-sm |
Small shadow. |
shadow-md |
Medium shadow. |
shadow-lg |
Large shadow. |
shadow-none |
No shadow. |
Größenbestimmung
Utility Class |
Description |
w-{size} / h-{size}
|
Width/Height (full, auto, percentages). |
max-w-{size} |
Maximum width. |
min-h-{size} |
Minimum height. |
Flexbox-Ausrichtung
Utility Class |
Description |
justify-start |
Align items at the start. |
justify-between |
Space between items. |
items-start |
Align items top. |
Positionierung
Utility Class |
Description |
absolute / relative
|
Positioning modes. |
top-{value} / left-{value}
|
Offset values. |
z-{value} |
Z-index (stacking). |
Farben
Class Examples |
Description |
text-blue-500 |
Blue text color. |
bg-green-300 |
Green background color. |
border-red-400 |
Red border color. |
Übergänge & Animation
Das obige ist der detaillierte Inhalt vonTailwind CSS Cheatsheet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!