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;

Tailwind CSS Container 類示例

以下示例將說明在不同斷點下的 Tailwind CSS Container 類。

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

在以下示例中，內容背景顏色將在具有“max-width: 640px;”的小型 (sm) 螢幕尺寸、具有“max-width: 768px;”的中型 (md) 螢幕尺寸和具有“max-width: 1024px;”的大型 (lg) 螢幕尺寸斷點處更改。

<!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) 螢幕尺寸處更改。

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

列印頁面