En Tailwind CSS , se utiliza un contenedor para fijar el ancho máximo de un elemento para que coincida con el ancho mínimo del punto de interrupción. Es muy útil cuando el contenido debe mostrarse de manera receptiva a cada punto de interrupción.
Los puntos de interrupción en Tailwind CSS son los siguientes.
| Punto de ruptura | ancho mínimo |
| SM | 640px |
| Maryland | 768px |
| lg | 1024px |
| SG | 1280px |
| 2xl | 1536px |
Tailwind CSS no se centra automáticamente y tampoco contiene ningún relleno predefinido. Las siguientes son algunas clases de utilidad que hacen que la clase contenedora se destaque.
mx-auto: para centrar el contenedor, usamos la clase de utilidad mx-auto . Ajusta el margen del contenedor automáticamente para que el contenedor parezca estar en el centro.
Sintaxis:
<element class="mx-auto">...</element>
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
<style>
.container {
background-color: rgb(2, 201, 118);
color: white;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2><br />
<div class="container mx-auto">
This is mx-auto class
</div>
</body>
</html>
Producción:
clase mx-auto
px-{size}: para agregar relleno al contenedor, usamos la clase de utilidad px-{size} . Agrega un acolchado horizontal al contenedor que es igual al tamaño mencionado.
Sintaxis:
<element class="px-20">...</element>
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
<style>
.container {
background-color: rgb(2, 201, 118);
color: white;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<br />
<div class="container mx-auto px-20">
This is px-20 class
</div>
</body>
</html>
Producción:
clase de tamaño px
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA