1. Interactividad
  2. resize

Interactividad

resize

Utilidades para controlar cómo se puede cambiar el tamaño de un elemento.

ClaseEstilos
resize-none
resize: none;
resize
resize: both;
resize-y
resize: vertical;
resize-x
resize: horizontal;

Ejemplos

Cambiar el tamaño en todas las direcciones

Utiliza resize para hacer que se pueda cambiar el tamaño de un elemento tanto horizontal como verticalmente:

Arrastra el tirador del área de texto en la demostración para ver el comportamiento esperado

<textarea class="resize rounded-md ..."></textarea>

Cambiar el tamaño verticalmente

Utiliza resize-y para hacer que se pueda cambiar el tamaño de un elemento verticalmente:

Arrastra el tirador del área de texto en la demostración para ver el comportamiento esperado

<textarea class="resize-y rounded-md ..."></textarea>

Cambiar el tamaño horizontalmente

Utiliza resize-x para hacer que se pueda cambiar el tamaño de un elemento horizontalmente:

Arrastra el tirador del área de texto en la demostración para ver el comportamiento esperado

<textarea class="resize-x rounded-md ..."></textarea>

Evitar el cambio de tamaño

Utiliza resize-none para evitar que se pueda cambiar el tamaño de un elemento:

Nota que el tirador del área de texto ha desaparecido

<textarea class="resize-none rounded-md"></textarea>

Diseño responsivo

Antepone a la utilidad resize 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="resize-none md:resize ...">  <!-- ... --></div>

Obtén más información sobre el uso de variantes en la documentación de variantes.

Copyright © 2026 Tailwind Labs Inc.·Política de marcas registradas