alternative way use container in tailwind css

In this tutorial we will see how to use alternative container in tailwind css. You can use max-w-* class for container.

How to install & setup Tailwind CSS v3


<div class="mx-auto max-w-7xl">
 <!-- Your content here -->
</div>


Examples

tailwind css alternative container by using max-w-* class

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alternative Way Use Container In Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div class="mx-auto max-w-7xl">
        <h1 class="text-3xl">Tailwind CSS Container Alternative </h1>
        <p>lorem ......</p>
    </div>
</body>

</html>
tailwind css alternative container

tailwind css alternative container


You can check by using bg color, shadow or padding.

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alternative Way Use Container In Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div class="mx-auto max-w-7xl p-4 bg-gray-200">
        <h1 class="text-3xl">Tailwind CSS Container Alternative </h1>
        <p>lorem ......</p>
    </div>
</body>

</html> 
tailwind css container

tailwind css container



Tags: