container 类在中大屏下自动约束宽度并居中，但仅在 sm 及以上断点生效，小屏（如手机）下默认为 100% 宽度，需结合响应式工具类或自定义媒体查询实现全屏适配。

直接用 container 类就能让内容区域在中大屏下自动约束宽度并居中，但它不是“一加就缩”，得理解它的响应式逻辑和依赖条件。

container 默认只在 sm 及以上生效

它在手机小屏（w-full mx-auto，也就是撑满全宽、不设最大宽度；真正开始限制宽度是从 sm（640px） 断点起，对应 max-w-640。如果你希望小屏也收窄，不能只靠 container，得手动加断点类：

• sm:max-w-md：小屏不生效，≥640px 才启用 max-w-md（768px）
• xs:max-w-sm sm:max-w-lg：从超小屏就开始控制，需在配置中启用 xs 断点或用 max-w- 组合
• 更稳妥的写法：max-w-4xl mx-auto px-4 sm:px-6 lg:px-8，绕过 container 的断点逻辑，全尺寸可控

确保父容器有宽度上下文

container 依赖父级能“撑开”再居中。如果它嵌套在 flex、grid 或 absolute 容器里，而该父容器没显式设宽（比如只写了 flex-1 却没配 min-w-0），container 就会退化为 w-full 行为——看着加了，实际还是满屏。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 检查浏览器开发者工具中的 Computed Styles，看 max-width 是否为 auto 或远小于预期
• 简单解法：给 container 包一层 <div class="w-full"> <li>常见翻车点：<code><header class="flex"><div class="container">…</div></header> —— header 缺少 width 约束

别指望 container 管内边距和固定宽度

container 只负责「响应式最大宽度 + 水平居中」，不带 padding，也不等于固定像素宽。例如 container 在 lg 下是 max-w-1024，但 max-w-4xl 是 56rem（896px），数值不同。

立即学习“前端免费学习笔记（深入）”；

• 需要统一留白：用 px-4 sm:px-6 lg:px-8 控制左右内边距
• 需要固定最大宽度（比如始终 1440px）：直接写 max-w-[1440px] mx-auto 或在配置里加自定义 maxWidth
• 避免 margin-collapse：别在 container 上直接加 pt-8，再和上一个元素的 mb-4 碰撞，留白会合并；建议用子容器包内容并设 p-6

想彻底自定义？改配置最干净

如果项目中大量需要非默认宽度的 container（比如全站统一 1440px），与其每个地方手写 max-w-[1440px] mx-auto，不如在 tailwind.config.js 里扩展：

• 方式一（推荐）：扩展 theme.maxWidth，加个 '1440': '1440px'，然后用 max-w-1440 mx-auto
• 方式二：覆盖 theme.container，设 center: true 和 padding: '1rem'，但注意它仍按断点生效
• JIT 模式下，直接写 max-w-[1440px] 也能被识别，无需提前配置