Open In App

Tailwind CSS Container

Improve
Improve
Like Article
Like
Save
Share
Report

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 follows.

Breakpoint min-width
sm 640px
md 768px
lg 1024px
xl 1280px
2xl 1536px

Tailwind CSS does not center itself automatically and also does not contain any pre-defined padding. The following are some utility classes that make the container class stand out.

mx-auto: To center the container, we use mx-auto utility class. It adjust the margin of the container automatically so that the container appears to be in center. 

 

Syntax:

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

Example:

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>


Output:

mx-auto class

px-{size}: To add padding the container, we use px-{size} utility class. It adds horizontal padding to the container which is equal to the size mentioned.

Syntax:

<element class="px-20">...</element>

Example:

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>


Output:

px-size class



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads