Diseño
Utilidades para controlar la colocación de elementos posicionados.
| Clase | Estilos |
|---|---|
inset-<number> | inset: calc(var(--spacing) * <number>); |
-inset-<number> | inset: calc(var(--spacing) * -<number>); |
inset-<fraction> | inset: calc(<fraction> * 100%); |
-inset-<fraction> | inset: calc(<fraction> * -100%); |
inset-px | inset: 1px; |
-inset-px | inset: -1px; |
inset-full | inset: 100%; |
-inset-full | inset: -100%; |
inset-auto | inset: auto; |
inset-(<custom-property>) | inset: var(<custom-property>); |
inset-[<value>] | inset: <value>; |
inset-x-<number> | inset-inline: calc(var(--spacing) * <number>); |
-inset-x-<number> | inset-inline: calc(var(--spacing) * -<number>); |
inset-x-<fraction> | inset-inline: calc(<fraction> * 100%); |
-inset-x-<fraction> | inset-inline: calc(<fraction> * -100%); |
inset-x-px | inset-inline: 1px; |
-inset-x-px | inset-inline: -1px; |
inset-x-full | inset-inline: 100%; |
-inset-x-full | inset-inline: -100%; |
inset-x-auto | inset-inline: auto; |
inset-x-(<custom-property>) | inset-inline: var(<custom-property>); |
inset-x-[<value>] | inset-inline: <value>; |
inset-y-<number> | inset-block: calc(var(--spacing) * <number>); |
-inset-y-<number> | inset-block: calc(var(--spacing) * -<number>); |
inset-y-<fraction> | inset-block: calc(<fraction> * 100%); |
-inset-y-<fraction> | inset-block: calc(<fraction> * -100%); |
inset-y-px | inset-block: 1px; |
-inset-y-px | inset-block: -1px; |
inset-y-full | inset-block: 100%; |
-inset-y-full | inset-block: -100%; |
inset-y-auto | inset-block: auto; |
inset-y-(<custom-property>) | inset-block: var(<custom-property>); |
inset-y-[<value>] | inset-block: <value>; |
inset-s-<number> | inset-inline-start: calc(var(--spacing) * <number>); |
-inset-s-<number> | inset-inline-start: calc(var(--spacing) * -<number>); |
inset-s-<fraction> | inset-inline-start: calc(<fraction> * 100%); |
-inset-s-<fraction> | inset-inline-start: calc(<fraction> * -100%); |
inset-s-px | inset-inline-start: 1px; |
-inset-s-px | inset-inline-start: -1px; |
inset-s-full | inset-inline-start: 100%; |
-inset-s-full | inset-inline-start: -100%; |
inset-s-auto | inset-inline-start: auto; |
inset-s-(<custom-property>) | inset-inline-start: var(<custom-property>); |
inset-s-[<value>] | inset-inline-start: <value>; |
inset-e-<number> | inset-inline-end: calc(var(--spacing) * <number>); |
-inset-e-<number> | inset-inline-end: calc(var(--spacing) * -<number>); |
inset-e-<fraction> | inset-inline-end: calc(<fraction> * 100%); |
-inset-e-<fraction> | inset-inline-end: calc(<fraction> * -100%); |
inset-e-px | inset-inline-end: 1px; |
-inset-e-px | inset-inline-end: -1px; |
inset-e-full | inset-inline-end: 100%; |
-inset-e-full | inset-inline-end: -100%; |
inset-e-auto | inset-inline-end: auto; |
inset-e-(<custom-property>) | inset-inline-end: var(<custom-property>); |
inset-e-[<value>] | inset-inline-end: <value>; |
inset-bs-<number> | inset-block-start: calc(var(--spacing) * <number>); |
-inset-bs-<number> | inset-block-start: calc(var(--spacing) * -<number>); |
inset-bs-<fraction> | inset-block-start: calc(<fraction> * 100%); |
-inset-bs-<fraction> | inset-block-start: calc(<fraction> * -100%); |
inset-bs-px | inset-block-start: 1px; |
-inset-bs-px | inset-block-start: -1px; |
inset-bs-full | inset-block-start: 100%; |
-inset-bs-full | inset-block-start: -100%; |
inset-bs-auto | inset-block-start: auto; |
inset-bs-(<custom-property>) | inset-block-start: var(<custom-property>); |
inset-bs-[<value>] | inset-block-start: <value>; |
inset-be-<number> | inset-block-end: calc(var(--spacing) * <number>); |
-inset-be-<number> | inset-block-end: calc(var(--spacing) * -<number>); |
inset-be-<fraction> | inset-block-end: calc(<fraction> * 100%); |
-inset-be-<fraction> | inset-block-end: calc(<fraction> * -100%); |
inset-be-px | inset-block-end: 1px; |
-inset-be-px | inset-block-end: -1px; |
inset-be-full | inset-block-end: 100%; |
-inset-be-full | inset-block-end: -100%; |
inset-be-auto | inset-block-end: auto; |
inset-be-(<custom-property>) | inset-block-end: var(<custom-property>); |
inset-be-[<value>] | inset-block-end: <value>; |
top-<number> | top: calc(var(--spacing) * <number>); |
-top-<number> | top: calc(var(--spacing) * -<number>); |
top-<fraction> | top: calc(<fraction> * 100%); |
-top-<fraction> | top: calc(<fraction> * -100%); |
top-px | top: 1px; |
-top-px | top: -1px; |
top-full | top: 100%; |
-top-full | top: -100%; |
top-auto | top: auto; |
top-(<custom-property>) | top: var(<custom-property>); |
top-[<value>] | top: <value>; |
right-<number> | right: calc(var(--spacing) * <number>); |
-right-<number> | right: calc(var(--spacing) * -<number>); |
right-<fraction> | right: calc(<fraction> * 100%); |
-right-<fraction> | right: calc(<fraction> * -100%); |
right-px | right: 1px; |
-right-px | right: -1px; |
right-full | right: 100%; |
-right-full | right: -100%; |
right-auto | right: auto; |
right-(<custom-property>) | right: var(<custom-property>); |
right-[<value>] | right: <value>; |
bottom-<number> | bottom: calc(var(--spacing) * <number>); |
-bottom-<number> | bottom: calc(var(--spacing) * -<number>); |
bottom-<fraction> | bottom: calc(<fraction> * 100%); |
-bottom-<fraction> | bottom: calc(<fraction> * -100%); |
bottom-px | bottom: 1px; |
-bottom-px | bottom: -1px; |
bottom-full | bottom: 100%; |
-bottom-full | bottom: -100%; |
bottom-auto | bottom: auto; |
bottom-(<custom-property>) | bottom: var(<custom-property>); |
bottom-[<value>] | bottom: <value>; |
left-<number> | left: calc(var(--spacing) * <number>); |
-left-<number> | left: calc(var(--spacing) * -<number>); |
left-<fraction> | left: calc(<fraction> * 100%); |
-left-<fraction> | left: calc(<fraction> * -100%); |
left-px | left: 1px; |
-left-px | left: -1px; |
left-full | left: 100%; |
-left-full | left: -100%; |
left-auto | left: auto; |
left-(<custom-property>) | left: var(<custom-property>); |
left-[<value>] | left: <value>; |
Usa utilidades top-<number>, right-<number>, bottom-<number>, left-<number> e inset-<number> como top-0 y bottom-4 para establecer la posición horizontal o vertical de un elemento posicionado:
<!-- Anclar a la esquina superior izquierda --><div class="relative size-32 ..."> <div class="absolute top-0 left-0 size-16 ...">01</div></div><!-- Abarcar el borde superior --><div class="relative size-32 ..."> <div class="absolute inset-x-0 top-0 h-16 ...">02</div></div><!-- Anclar a la esquina superior derecha --><div class="relative size-32 ..."> <div class="absolute top-0 right-0 size-16 ...">03</div></div><!-- Abarcar el borde izquierdo --><div class="relative size-32 ..."> <div class="absolute inset-y-0 left-0 w-16 ...">04</div></div><!-- Llenar todo el padre --><div class="relative size-32 ..."> <div class="absolute inset-0 ...">05</div></div><!-- Abarcar el borde derecho --><div class="relative size-32 ..."> <div class="absolute inset-y-0 right-0 w-16 ...">06</div></div><!-- Anclar a la esquina inferior izquierda --><div class="relative size-32 ..."> <div class="absolute bottom-0 left-0 size-16 ...">07</div></div><!-- Abarcar el borde inferior --><div class="relative size-32 ..."> <div class="absolute inset-x-0 bottom-0 h-16 ...">08</div></div><!-- Anclar a la esquina inferior derecha --><div class="relative size-32 ..."> <div class="absolute right-0 bottom-0 size-16 ...">09</div></div>Para usar un valor negativo de top/right/bottom/left, antecede un guion al nombre de la clase para convertirlo en un valor negativo:
<div class="relative size-32 ..."> <div class="absolute -top-4 -left-4 size-14 ..."></div></div>Usa utilidades inset-s-<number> o inset-e-<number> como inset-s-0 e inset-e-4 para establecer las propiedades lógicas inset-inline-start e inset-inline-end, que se asignan al lado izquierdo o derecho según la dirección del texto:
De izquierda a derecha
De derecha a izquierda
<div dir="ltr"> <div class="relative size-32 ..."> <div class="absolute inset-s-0 top-0 size-14 ..."></div> </div> <div> <div dir="rtl"> <div class="relative size-32 ..."> <div class="absolute inset-s-0 top-0 size-14 ..."></div> </div> <div></div> </div> </div></div>Para un mayor control, también puedes usar los modificadores LTR y RTL para aplicar estilos específicos de forma condicional según la dirección actual del texto.
Usa la sintaxis top-[<value>] para establecer el/la position basándose en un valor completamente personalizado:
<div class="top-[3px] ..."> <!-- ... --></div>Para variables CSS, también puedes usar la sintaxis top-(<custom-property>) :
<div class="top-(--my-top) ..."> <!-- ... --></div>Esto es solo un atajo para top-[var(<custom-property>)] que añade la función var() por ti automáticamente.
Antepone a las utilidades inset,inset-x,inset-y,inset-s,inset-e,inset-bs,inset-be,top,left,bottom, y right el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="top-4 md:top-6 ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.
Las utilidades inset-<number>,inset-x-<number>,inset-y-<number>,inset-s-<number>,inset-e-<number>,inset-bs-<number>,inset-be-<number>,top-<number>,left-<number>,bottom-<number>, y right-<number> se basan en la variable de tema --spacing, la cual se puede personalizar en tu propio tema:
@theme { --spacing: 1px; }Obtén más información sobre cómo personalizar la escala de espaciado en la documentación de variables de tema.