Tailwind CSS - 容器

Tailwind CSS Container 类用于在不同的断点内固定元素的宽度。此 Container 实用程序类可避免为在不同的断点调整元素宽度而编写自定义 CSS 代码。

Tailwind CSS Container 确保响应式设计，并可用于通过在不同的断点固定元素宽度来水平居中内容。

语法

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

Tailwind CSS Container 类

以下是我们可以有效使用Tailwind CSS Container类的断点列表。

类	断点	属性
Container	sm	max-width: 640px;
	md	max-width: 768px;
	lg	max-width: 1024px;
	xl	max-width: 1280px;
	2xl	max-width: 1536px;

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS Container 类示例

以下示例将说明在不同断点下的 Tailwind CSS Container 类。

小型、中型和大型屏幕的容器背景更改

在以下示例中，内容背景颜色将在具有“max-width: 640px;”的小型 (sm) 屏幕尺寸、具有“max-width: 768px;”的中型 (md) 屏幕尺寸和具有“max-width: 1024px;”的大型 (lg) 屏幕尺寸断点处更改。

Open Compiler

<!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>

特大型和双特大型屏幕的容器背景更改

在以下示例中，内容背景颜色将在具有“max-width: 1280px;”的特大型 (xl) 屏幕尺寸和具有“max-width: 1536px;”的双特大型 (2xl) 屏幕尺寸处更改。

Open Compiler

<!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>

打印页面