如何基于侧边栏状态用Tailwind条件水平居中主内容div

当然可以用Tailwind的has变体实现这个需求，结合Headless UI Disclosure的状态特征，具体实现如下：

核心思路 #

Headless UI的Disclosure关闭时，侧边栏容器是空的（仅带有data-headlessui-state属性，无内容）；打开时则带有data-headlessui-state="open"且包含内容。我们可以通过has变体检测这个状态，动态调整布局。

代码实现 #

修改你的网格容器和主内容组件的类名即可：

<div className="w-full grid grid-cols-[auto_1fr] has-[> [data-headlessui-state]:empty]:grid-cols-[1fr] has-[> [data-headlessui-state]:empty]:place-items-center">
  <MySidebarComponent />
  <MyMainComponent />
</div>

代码解释 #

• grid-cols-[auto_1fr]：默认状态下（侧边栏显示）保持两列布局，第一列自适应侧边栏宽度，第二列占满剩余空间。
• has-[> [data-headlessui-state]:empty]:grid-cols-[1fr]：当网格容器的直接子元素（侧边栏容器）为空时，切换为单列布局，让主内容占满整个宽度。
• has-[> [data-headlessui-state]:empty]:place-items-center：在单列布局时，让主内容水平+垂直居中（如果只需要水平居中，换成justify-items-center即可）。

另一种写法（针对状态属性） #

如果你更倾向于通过data-headlessui-state的属性值判断，也可以这样写：

<div className="w-full grid grid-cols-[auto_1fr] has-[> [data-headlessui-state]:not([data-headlessui-state='open'])]:grid-cols-[1fr] has-[> [data-headlessui-state]:not([data-headlessui-state='open'])]:justify-items-center">
  <MySidebarComponent />
  <MyMainComponent />
</div>

注意事项 #

确保你的Tailwind版本是v3.4或更高，因为has变体是v3.4才正式推出的特性。

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