Mise en page
| 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. |
Espacement
| Utility Class |
Description |
| m-{size} |
Margin: mt, mb, ml, mr. |
| p-{size} |
Padding: pt, pb, pl, pr. |
|
{size} options |
0, px, 1 - 96, etc. |
Typographie
| 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. |
Contexte
| Utility Class |
Description |
| bg-{color} |
Background color. |
| bg-gradient-to-r |
Gradient from left to right. |
| bg-opacity-{value} |
Background transparency. |
Frontières
| Utility Class |
Description |
| border |
Default border width. |
| border-{color} |
Border color. |
|
rounded / rounded-{size}
|
Rounded corners. |
Ombres
| Utility Class |
Description |
| shadow-sm |
Small shadow. |
| shadow-md |
Medium shadow. |
| shadow-lg |
Large shadow. |
| shadow-none |
No shadow. |
Taille
| Utility Class |
Description |
|
w-{size} / h-{size}
|
Width/Height (full, auto, percentages). |
| max-w-{size} |
Maximum width. |
| min-h-{size} |
Minimum height. |
Alignement Flexbox
| Utility Class |
Description |
| justify-start |
Align items at the start. |
| justify-between |
Space between items. |
| items-start |
Align items top. |
Positionnement
| Utility Class |
Description |
|
absolute / relative
|
Positioning modes. |
|
top-{value} / left-{value}
|
Offset values. |
| z-{value} |
Z-index (stacking). |
Couleurs
| Class Examples |
Description |
| text-blue-500 |
Blue text color. |
| bg-green-300 |
Green background color. |
| border-red-400 |
Red border color. |
Transitions & Animations
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
MySQL crée une procédure stockée
Méthode d'implémentation de la fonction js barrage
Comment résoudre le rapport d'erreur
Comment résoudre l'erreur 443
configuration des variables d'environnement jdk
Que signifient les faces B et C ?
horodatage python
Comment changer la disposition CAO du blanc au noir
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
