Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Container

  • Difficulty Level : Expert
  • Last Updated : 01 Jun, 2021

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.

Breakpointmin-width
sm640px
md768px
lg1024px
xl1280px
2xl1536px

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :