理解 Container：掌握 container 类的核心功能，即限制内容最大宽度并实现响应式布局。
掌握关键工具类：熟练运用 mx-auto 实现水平居中，以及 px-{size} 添加内边距。
熟悉断点系统：了解 Tailwind CSS 默认的响应式断点（sm, md, lg, xl, 2xl）及其对应的像素值。
学会最佳实践：掌握如何通过配置文件自定义容器行为，提升开发效率和代码一致性。
在 Tailwind CSS 中，container 类是一个用于约束内容宽度并确保布局具有响应式和居中特性的核心工具。它不仅仅是一个简单的宽度限制器，更是构建现代化网页布局的基石。
核心功能：
内容居中：自动将内容在视口（Viewport）内水平居中。
响应式宽度：在不同的断点（Breakpoints）设置最大宽度，确保设计在各种设备上保持一致性。
防止过度拉伸：在大屏幕设备上限制内容宽度，避免文本行过长，从而维持良好的可读性和视觉平衡。
以下是一个使用 container 类的基本 HTML 结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Tailwind Container 示例</title>
<!-- 引入 Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<!--
container: 应用响应式最大宽度
mx-auto: 水平居中
px-4: 左右两侧添加 1rem 的内边距，防止内容贴边
-->
<div class="container mx-auto px-4">
<h1 class="text-2xl font-bold text-gray-800">欢迎来到 Tailwind CSS 世界</h1>
<p class="mt-4 text-gray-600">
这是一个简单的示例，展示了如何在 Tailwind CSS 中使用 container 类来构建响应式布局。
无论屏幕多宽，内容都不会无限拉伸。
</p>
</div>
</body>
</html>代码解析：
container：根据当前屏幕宽度应用预设的最大宽度。
mx-auto：等价于 margin-left: auto 和 margin-right: auto，是实现居中的关键。
px-4：为容器内部内容提供呼吸空间，避免在移动端内容紧贴屏幕边缘。
container 类的强大之处在于它能根据不同的屏幕宽度自动调整最大宽度。Tailwind CSS 默认定义了以下断点：
当屏幕宽度达到某个断点时，容器的最大宽度会相应增加，直到达到该断点的上限或下一个断点。
注意：默认的
container类本身不会自动居中，也不包含预设的内边距（Padding）。为了实现完美的布局效果，开发者通常需要组合使用其他工具类。
为了让 container 发挥最大效用，我们需要配合以下两个关键的工具类。
实现水平居中
正如前文所述，container 默认不居中。我们需要使用 mx-auto 工具类来自动调整左右外边距（Margin），使容器在父元素中水平居中。
语法：
<div class="mx-auto">...</div>示例演示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>mx-auto 居中示例</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-200 p-8">
<!-- 第一个区块：展示 mx-auto 的居中效果 -->
<div class="bg-green-600 text-white mx-auto p-4 w-full max-w-md">
此区块使用了 mx-auto 类，已水平居中。
</div>
<!-- 第二个区块：展示间距控制 -->
<div class="bg-blue-600 text-white mx-auto p-4 mt-4 w-full max-w-md">
此区块同样居中，并通过 mt-4 与上方区块保持了间距。
</div>
</body>
</html>效果说明：
第一个 div 展示了 mx-auto 如何将固定宽度的内容块居中。
第二个 div 引入了 mt-4（上边距），展示了如何控制多个居中元素之间的垂直距离。
添加水平内边距
为了防止内容在容器边缘显得过于拥挤，通常需要在容器内部添加水平内边距。px-{size} 类可以为元素的左右两侧添加相等的内边距。
语法：
<div class="px-4">...</div>
<!-- 其中 4 代表 spacing scale 中的值，通常为 1rem (16px) -->示例演示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>px 内边距示例</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 p-8">
<h2 class="text-center text-green-600 font-bold text-xl mb-6">DevMaster 教程</h2>
<!-- 使用 px-20 添加巨大的水平内边距 -->
<div class="bg-green-600 text-white mx-auto px-20 py-8 rounded shadow-lg">
此容器左右两侧拥有巨大的内边距 (5rem / 80px)。
这使得内部的文字远离边缘，阅读体验更佳。
</div>
<p class="text-center text-gray-500 mt-4 text-sm">
注：px-20 等同于 padding-left: 5rem; padding-right: 5rem;
</p>
</body>
</html>效果说明：
px-20 为容器左右两侧各添加了 5rem (约 80px) 的内边距。
结合 mx-auto，容器不仅居中，而且内部内容也不会紧贴容器边界。
本质：它是一个响应式的宽度约束器，而非自动居中器。必须配合 mx-auto 使用才能实现完美的居中布局。
断点驱动：容器的最大宽度随屏幕尺寸变化，严格遵循 sm, md, lg, xl, 2xl 断点系统。
内边距的重要性：container 默认无内边距，务必使用 px-{size} 或在全局配置中添加 padding，以防内容贴边。
配置优于硬编码：通过 tailwind.config.js 全局配置 center 和 padding 属性，可以显著减少 HTML 中的类名数量，提高代码可维护性。
如果在 tailwind.config.js 中设置了 container: { center: true }，那么在 HTML 中使用 <div class="container"> 时，是否还需要手动添加 mx-auto 类？为什么？
假设你的设计稿要求在大屏幕（1920px）上内容最大宽度限制为 1200px，而在平板上限制为 700px，你应该如何修改 Tailwind 的配置文件来实现这一需求？
px-4 和 container 类中的 padding 配置项有什么本质区别？在什么场景下你会选择直接在 HTML 中写 px-4，而不是在配置文件中设置全局 padding？
下图展示了 container 类在不同屏幕宽度下的行为逻辑：
图示说明：随着屏幕变宽，容器的最大宽度限制逐步提升，但始终通过 mx-auto 保持水平居中状态，确保内容在任何设备上都不会过度拉伸。