Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas como un formulario de clase. Esta clase se utiliza para cambiar el tamaño del elemento según los requisitos del usuario. No se aplica a los elementos en línea ni a los elementos de bloque donde el desbordamiento es visible. En CSS, hacemos eso usando la propiedad de cambio de tamaño de CSS .
Redimensionar
- resize-none: esta clase es para evitar que se cambie el tamaño de un elemento.
- resize-y: Esta clase es para hacer un elemento redimensionable verticalmente.
- resize-x: Esta clase es para hacer un elemento redimensionable horizontalmente.
- cambiar el tamaño: esta clase es para hacer que un elemento sea redimensionable horizontal y verticalmente.
Sintaxis:
<element class="pointer-{axis-boolean}">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Resize Class</b> <div id="main" class="p-2 justify-around ml-32 h-26 w-2/3 flex items-stretch bg-green-200 border-solid border-4 border-green-900 gap-4"> <textarea class="resize border rounded-md w-24 h-12"></textarea> <textarea class="resize-y border rounded-md w-24 h-12"></textarea> <textarea class="resize-x border rounded-md w-24 h-12"></textarea> <textarea class="resize-none border rounded-md w-24 h-12"></textarea> </div> </body> </html>
Producción:
Clase de cambio de tamaño CSS Tailwind
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA