如何使用Tailwind实现蓝色区域满宽、紫色区域限9/12栅格的布局

你当前的问题根源是蓝色侧边栏被限制在了居中的固定宽度容器内，无法突破容器边界延伸到视口左边缘。可以通过动态计算边距和宽度实现需求，无需修改你原本12栅格最大宽度1200px的规则。

修改后可直接运行的代码 #

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="container lg:w-[1200px] bg-red-500 mx-auto flex">
  <div class="w-3/12 lg:ml-[calc((100vw-1200px)/-2)] lg:w-[calc(300px+(100vw-1200px)/2)] bg-blue-500 grid place-items-center h-screen">3/12</div>
  <div class="w-9/12 h-80 relative">
    <div class="bg-yellow-500 h-20"></div>
    <div class="bg-green-500 h-screen grid place-items-center">9/12</div>
  </div>
</div>

关键配置说明 #

• 屏幕宽度≥1200px时，lg:ml-[calc((100vw-1200px)/-2)]会让蓝色侧边栏向左偏移，刚好对齐视口左边缘
• 同步设置lg:w-[calc(300px+(100vw-1200px)/2)]，保证侧边栏宽度覆盖视口左边缘到原12栅格3/12的右边界
• 小于1200px的屏幕会自动回退到你原本的布局逻辑，无需额外适配

非JIT模式兼容方案 #

如果你使用的Tailwind 2没有开启JIT模式，不支持方括号内联自定义属性，可以先在配置文件中扩展工具类：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      margin: {
        'screen-offset': 'calc((100vw - 1200px) / -2)',
      },
      width: {
        'sidebar-full': 'calc(300px + (100vw - 1200px) / 2)',
      }
    },
  }
}

之后直接在元素上添加类名lg:ml-screen-offset lg:w-sidebar-full即可生效。

内容的提问来源于stack exchange，提问作者dungreact