Tailwind实现无JS多级侧边栏菜单：复选框控制Chevron旋转失效问题

问题 #

纯靠CSS实现多级侧边栏菜单（不用JS/React setState），菜单展开功能正常，但勾选复选框时，Chevron箭头图标无法旋转90度。需求是菜单支持无限层级，且能从JSON生成，因此不想使用命名的group/peer类。试过调整peer位置、改用group均无效，重构元素位置虽能解决但非最优解。

问题根源 #

1. Tailwind peer 伪类作用范围限制：peer-checked只能作用于与复选框同级的元素，原代码中图标位于复选框的子级容器内，不在同级范围内，因此无法触发旋转样式。
2. HTML结构错误：第一个<input>标签的闭合位置错误，错误包裹了后续内容，导致结构混乱。

修复方案 #

1. 修正HTML结构：将<input>标签直接闭合，避免错误包裹内容。
2. 调整元素层级：把图标容器和子菜单容器都放在复选框的同级（同属<label>下），确保peer-checked能正确作用于图标。
3. 保持可嵌套结构：仅使用通用的peer类，无需命名，满足JSON生成需求。

修复后的完整代码 #

<div class="container mx-auto flex h-screen">
  <div class="flex w-48 flex-col bg-slate-100">
    <div class="hover:bg-pink-300">Item 1</div>
    <div class="hover:bg-pink-300">Item 2</div>
    <div class="hover:bg-pink-300">Item 3</div>
    <label class="cursor-pointer block">
      <input type="checkbox" class="peer hidden cursor-pointer select-none rounded-lg bg-slate-500 ease-in-out" />
      <div class="flex items-center justify-between">
        <span>Group 1</span>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4 transition-transform duration-200 peer-checked:rotate-90">
          <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
        </svg>
      </div>
      <div class="relative hidden pl-4 peer-checked:block">
        <div class="hover:bg-pink-300">Item 1-1</div>
        <div class="hover:bg-pink-300">Item 1-2</div>
        <div class="hover:bg-pink-300">Item 1-3</div>
        <label class="cursor-pointer block">
          <input type="checkbox" class="peer hidden cursor-pointer select-none rounded-lg bg-slate-500 ease-in-out" />
          <div class="flex items-center justify-between">
            <span>Group 2</span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4 transition-transform duration-200 peer-checked:rotate-90">
              <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
            </svg>
          </div>
          <div class="relative hidden pl-4 peer-checked:block">
            <div class="hover:bg-pink-300">Item 2-1</div>
            <div class="hover:bg-pink-300">Item 2-2</div>
            <div class="hover:bg-pink-300">Item 2-3</div>
          </div>
        </label>
      </div>
    </label>
  </div>
  <div class="flex flex-1 bg-lime-100"></div>
</div>

额外优化 #

• 添加transition-transform duration-200类，让图标旋转有平滑过渡效果。
• 给<label>加block类，确保整行可点击，提升交互体验。

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