Estilos Índice de páginas
Espaciados
Valores predefinidos que se han de usar para saltos entre objetos, padding, márgenes y dimensiones.
Índice de apartados de esta página
Espaciado para elementos Enlace al apartado: Espaciado para elementos
Utiliza en la medida de lo posible estos valores, que se aplicarán automáticamente por Tailwind CSS a height, max-height, margin, padding, gap e inset.
| Nombre | Tamaño | Pixels | Ejemplo de clases | Previsualización |
|---|---|---|---|---|
| xs | 0.25rem | 4px | pr-xs |
|
|
|
|
|
||||
| sm | 0.5rem | 8px | pr-sm |
||
|
|
||
|
||||
| base | 1rem | 16px | pr-base |
||||
|
|
||||
|
||||
| lg | 1.75rem | 28px | pr-lg |
|||||||
|
|
|||||||
|
||||
| xl | 2.5rem | 40px | pr-xl |
||||||||||
|
|
||||||||||
|
||||
| 2xl | 5rem | 80px | pr-2xl |
||||||||||||||||||||
|
|
||||||||||||||||||||
|
||||
| 3xl | 10rem | 160px | pr-3xl |
||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||
|
||||
Espaciado para anchuras Enlace al apartado: Espaciado para anchuras
Utiliza en la medida de lo posible estos valores para establecer valores de width y max-width.
| Nombre | Tamaño | Pixels | Ejemplo de clases | Previsualización |
|---|---|---|---|---|
| xs | 20rem | 320px | w-xs |
|
| sm | 24rem | 384px | w-sm |
|
| md | 28rem | 448px | w-md |
|
| lg | 32rem | 512px | w-lg |
|
| xl | 36rem | 576px | w-xl |
|
Espaciado máximo Enlace al apartado: Espaciado máximo
desy-html usa los valores de Tailwind CSS y adicionalmente estos otros:
| Nombre | Tamaño | Pixels | Ejemplo de clases | Previsualización |
|---|---|---|---|---|
| 40 | 10rem | 160px | max-w-40 |
||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||
|
||||
| 64 | 16rem | 256px | max-w-64 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||
Más espaciados Enlace al apartado: Más espaciados
Si necesitas más espaciados, usa los espaciados por defecto de Tailwind CSS.