Esta clase acepta muchos valores en Tailwind CSS en los que todas las propiedades están cubiertas en forma de clase. Es la alternativa a la propiedad min-width de CSS . Esta clase se utiliza para definir el ancho mínimo de un elemento. El valor del ancho no puede ser menor que el valor del ancho mínimo . Si el contenido especificado dentro del elemento es más pequeño, min-width mantiene el ancho mínimo especificado.
Clases de ancho mínimo:
- min-w-0: esta clase se usa para establecer la longitud de min-width .
- min-w-full: esta clase se utiliza para establecer la longitud de min-width a plena capacidad.
- min-w-min: esta clase se utiliza para establecer la longitud de min-width en la capacidad mínima.
- min-w-max: esta clase se utiliza para establecer la longitud de min-width en la capacidad máxima.
Sintaxis:
<element class="min-w-0">...</element>
Ejemplo: El ancho cambiará según el tamaño de la pantalla.
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS MIn-Width Class</b> <div class="w-24 h-16 min-w-full md:min-w-0 bg-green-400 rounded-lg text-white"> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA