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 max-width de CSS . Esta clase se utiliza para definir el ancho máximo de un elemento. El valor del ancho no puede ser mayor que el valor del ancho máximo . Si el contenido especificado dentro del elemento es más grande, max-width mantiene el ancho máximo especificado.
En esta clase, veremos una nueva presentación de propiedades CSS, la clase Prose. Se ha utilizado para tener un ancho de lectura óptimo. Si está familiarizado con el «complemento de tipografía», puede adivinar el funcionamiento de esta clase.
Clases de ancho máximo:
- max-w-0: esta clase se usa para establecer el ancho de la pantalla como max-width: 0rem .
- max-w-none: esta clase se usa para establecer el ancho de la pantalla como max-width: none .
- max-w-xs: esta clase se usa para establecer el ancho de la pantalla como max-width: 20rem .
- max-w-sm: esta clase se usa para establecer el ancho de la pantalla como max-width: 24rem .
- max-w-md: esta clase se usa para establecer el ancho de la pantalla como max-width: 28rem .
- max-w-lg: esta clase se usa para establecer el ancho de la pantalla como max-width: 32rem .
- max-w-xl: esta clase se usa para establecer el ancho de la pantalla como max-width: 36rem .
- max-w-2xl: esta clase se usa para establecer el ancho de la pantalla como max-width: 42rem ;
- max-w-3xl: esta clase se usa para establecer el ancho de la pantalla como max-width: 48rem .
- max-w-4xl: esta clase se usa para establecer el ancho de la pantalla como max-width: 56rem .
- max-w-5xl: esta clase se usa para establecer el ancho de la pantalla como max-width: 64rem .
- max-w-6xl: esta clase se usa para establecer el ancho de la pantalla como max-width: 72rem .
- max-w-7xl: esta clase se usa para establecer el ancho de la pantalla como max-width: 80rem .
- max-w-full: esta clase se usa para establecer el ancho de la pantalla como max-width: 100% .
- max-w-min: esta clase se usa para establecer el ancho de la pantalla como max-width: min-content .
- max-w-max: esta clase se usa para establecer el ancho de la pantalla como max-width: max-content .
- max-w-prose: esta clase se usa para establecer el ancho de la pantalla como max-width: 65ch .
- max-w-screen-sm: esta clase se usa para establecer el ancho de la pantalla como max-width: 640px .
- max-w-screen-md: esta clase se usa para establecer el ancho de la pantalla como max-width: 768px .
- max-w-screen-lg: esta clase se usa para establecer el ancho de la pantalla como max-width: 1024px .
- max-w-screen-xl: esta clase se usa para establecer el ancho de la pantalla como max-width: 1280px .
- max-w-screen-2xl: esta clase se usa para establecer el ancho de la pantalla como max-width: 1536px .
Sintaxis:
<element class="max-w-0">...</element>
Ejemplo:
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 Max-Width Class</b> <div class="h-8 max-w-xs mx-auto bg-green-400 rounded-lg text-white"> max-w-xs </div> <div class="h-8 max-w-md mx-auto bg-green-400 rounded-lg text-white"> max-w-md </div> <div class="h-8 max-w-lg mx-auto bg-green-400 rounded-lg text-white"> max-w-lg </div> <div class="h-8 max-w-xl mx-auto bg-green-400 rounded-lg text-white"> max-w-xl </div> <div class="h-8 max-w-2xl mx-auto bg-green-400 rounded-lg text-white"> max-w-2xl </div> <div class="h-8 max-w-max mx-auto bg-green-400 rounded-lg text-white"> max-w-max </div> </body> </html>
Producción:
Clase de ancho máximo
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA