Tailwind CSS Container

Tailwind CSS Container

In Tailwind CSS, a container is used to fix the max-width of an element to match the min-width of the breakpoint. It comes very handy when content has to be displayed in a responsive manner to every breakpoint.

Breakpoints in tailwind CSS are as per the following:

Breakpointmin-width
sm640px
ld768px
mg1024px
xl1280px
2xl1536px

Tailwind CSS Container : Syntax

<element class="mx-auto">...</element>

Example:

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
  
    <style>
        .container {
            background-color:#CF2E2E;
            color: white;
        }
  
        h2 {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h2 style="color:#0170B9">
        <b>HOW2TRICK</b>
    </h2><br />
      
    <div class="container mx-auto">
        This is mx-auto class
    </div>
</body>
  
</html>

Output:

HOW2TRICK

This is mx-auto class

Leave a Comment

Your email address will not be published. Required fields are marked *