Tailwind CSS - Container

Previous
Quiz
Next

Tailwind CSS Container class is used to fix the element's width within different breakpoints. This Container utility class prevents writing custom CSS code for adjusting an elements width at distinct breakpoints.

Tailwind CSS Container ensures a responsive design and can be used to center the content horizontally by fixing the element's width at distinct breakpoints.

Syntax

<element class="container"></element>

Tailwind CSS Container Class

Following is the list of breakpoints that we can use with Tailwind CSS Container Class effectively.

Class Breakpoint Properties
Container sm max-width: 640px;
md max-width: 768px;
lg max-width: 1024px;
xl max-width: 1280px;
2xl max-width: 1536px;

Tailwind CSS Container Class Examples

Below examples will illustrate the Tailwind CSS Container class at distinct breakpoints.

Container background change for Small, Medium and large Screen

In the following example, the content background color will change at the small(sm) screen size having "max-width: 640px;", medium(md) screen size having "max-width: 768px;", and a large(lg) screen size having "max-width: 1024px;" breakpoint.

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <p class="text-2xl font-bold">
        Tailwind CSS - Container
    </p>
    <div class="container p-4 
                sm:bg-red-500 
                md:bg-green-500
                lg:bg-blue-500">
        <p>
            This example illustrate the background color
            changes of this content depending on the 
            screen size at sm,md,lg breakpoints.
        </p>
    </div>
</body>

</html>

Container background change for Extra large and Double Extra Large

In the following example the content background color will change at extra large(xl) screen size having "max-width: 1280px;", and double extra large(2xl) screen size having "max-width: 1536px;".

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <p class="text-2xl font-bold">
        Tailwind CSS - Container
    </p>
    <div class="container p-4 
                xl:bg-red-500 
                2xl:bg-green-500">
        <p>
            This example illustrate the background color
            changes of this content depending on the 
            screen size at xl and 2xl breakpoints.
        </p>
    </div>
</body>

</html>
Print Page
Previous
Next
Advertisements