Contenedor Tailwind CSS

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *