Tailwind CSS中固定宽度侧边栏尺寸不符合预期的问题排查

我编写了一段使用Tailwind CSS的HTML代码，将侧边栏宽度设为312px，但实际显示宽度并非预期值。代码如下：

<!DOCTYPE html>
<html class="h-full" lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="h-full">
    <div id="app" class="h-full flex">
      <div class="w-[312px] bg-red-100">
        <h1 class="text-3xl font-bold">
          Sidebar
        </h1>
      </div>
      <div class="w-full bg-green-100">
        <h1 class="text-3xl font-bold">
          Main
        </h1>
      </div>
    </div>
  </body>
</html>

原因及解决方法 #

问题源于两个核心点：

1. Flex子元素的默认收缩行为：Tailwind中Flex子元素默认带有flex-shrink: 1样式，当Flex容器的可用空间不足以容纳侧边栏（312px）和主内容区（100%宽度）的总和时，侧边栏会被自动压缩，导致实际宽度小于设置值。
2. body默认外边距：浏览器默认给<body>添加了8px的外边距，这会减少Flex容器的可用宽度，进一步触发侧边栏的收缩逻辑。

解决步骤：

• 给侧边栏添加flex-shrink-0类，禁止其被收缩，确保宽度固定为312px：

  <div class="w-[312px] bg-red-100 flex-shrink-0">
  

• 给<body>添加m-0类，移除默认外边距，让Flex容器占满整个视口宽度：

  <body class="h-full m-0">
  

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