Espaciado
Valores predefinidos que se han de usar para saltos entre objetos, padding, márgenes y dimensiones.
Espaciado #
Espaciado preferido de desy-html #
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 preferido de desy-html para width #
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 adicional de desy-html para max-width y max-height #
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 #
Si necesitas más espaciados, usa los espaciados por defecto de Tailwind CSS.