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.