使用TailwindCSS开发响应式后台仪表盘时出现未编码额外div的问题排查求助

我正在使用TailwindCSS开发一个纯前端后台仪表盘，以此练习响应式网站开发。目前移动端布局已完成，正在开发桌面端版本。在设置网站响应式布局后，侧边栏的位置符合预期，但当我使用浏览器审查元素时，发现侧边栏内的flex行中出现了一个我并未编写的div元素（位于home图标右侧的该div不应存在，我完全没有编写相关代码）。我完全不清楚这个div为何会出现，因为它仅在审查home图标与文本的父元素时才可见。虽然该问题并未破坏代码功能，但我十分好奇其产生原因，因此非常感谢任何相关建议。

问题出现位置的代码 #

<div class="flex flex-col cursor-pointer hover:scale-125 ease-in duration-300 w-12 items-center md:flex-row md:gap-x-4" >
<img class="scale-110" src="./images/home.svg" />
<p class="hidden md:inline md:font-bold md:text-2xl md:my-2"> Home </p>
</div>

完整代码 #

<!DOCTYPE html>
<html>
<head>
<title>Admin Dashboard</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="box-border px-10 py-8 flex flex-col items-center min-h-screen md:grid md:grid-cols-[1fr,3.5fr] md:p-0" >
<div class="sticky top-0 px-5 py-3 h-fit w-full min-w-sm rounded-xl border border-gray-200 shadow-lg flex items-center justify-around bg-white md:h-full md:items-start md:p-8 md:rounded-none" >
<div class="flex w-full justify-around md:flex-col md:gap-y-6 md:justify-start" >
<div class="flex flex-col cursor-pointer hover:scale-125 ease-in duration-300 w-12 items-center md:flex-row md:gap-x-4" >
<img class="scale-110" src="./images/home.svg" />
<p class="hidden md:inline md:font-bold md:text-2xl md:my-2"> Home </p>
</div>
<div class="flex flex-col cursor-pointer hover:scale-125 ease-in duration-300 w-12 items-center md:flex-row" >
<img class="scale-110" src="./images/profile.svg" />
</div>
<div class="flex flex-col cursor-pointer hover:scale-125 ease-in duration-300 w-12 items-center md:flex-row" >
<img class="scale-110" src="./images/message.svg" />
</div>
<div class="flex flex-col cursor-pointer hover:scale-125 ease-in duration-300 w-12 items-center md:flex-row" >
<img class="scale-110" src="./images/menu.svg" />
</div>
</div>
</div>
<div class="md:relative md:p-8">
<div class="flex w-full min-w-sm mt-5 mb-3 items-center">
<div class="text-5xl"></div>
<div class="mx-5">
<p>Hi there,</p>
<p class="font-bold text-2xl">Jay Sean</p>
</div>
</div>
<div class="border-t w-full"></div>
<div class="flex w-full min-w-sm justify-start">
<p class="font-bold text-2xl my-2">Your Projects</p>
</div>
<div class="flex flex-col gap-y-4">
<div class="p-4 h-fit w-full min-w-sm rounded-xl border border-gray-200 shadow-md bg-white border-l-8 border-l-yellow-500" >
<p class="font-bold text-2xl my-2">Super Cool Project</p>
<div class="border-b w-full"></div>
<p class="mt-2 line-clamp-1"> Proin convallis enim consequat, imperdiet justo eget, pulvinar purus. Vestibulum ac pretium est. Nam in libero at turpis rhoncus ullamcorper a ut ex. Aenean ut gravida dolor. Etiam tincidunt hendrerit mattis. Nam ac ornare metus, at euismod ipsum. Donec non ultrices dolor. Duis gravida dui quis sapien rutrum venenatis. Aenean id nibh congue dui tristique mattis nec vel risus. </p>
</div>
<div class="p-4 h-fit w-full min-w-sm rounded-xl border border-gray-200 shadow-md bg-white border-l-8 border-l-yellow-500" >
<p class="font-bold text-2xl my-2">Less Cool Project</p>
<div class="border-b w-full"></div>
<p class="mt-2 line-clamp-1"> Aliquam eget dui nibh. Curabitur eget auctor tortor, id volutpat odio. In condimentum quam dictum, vulputate nunc id, fringilla lorem. Quisque consectetur ante sed felis finibus, vitae dapibus eros semper. In eget tincidunt metus. Proin eget rutrum erat, id rutrum elit. Nunc non nisi dui. Maecenas in purus augue. Cras pellentesque rhoncus lectus in varius. In gravida nibh orci, eget pretium felis vehicula a. Integer dolor odio, laoreet non ipsum et, euismod </p>
</div>
<div class="p-4 h-fit w-full min-w-sm rounded-xl border border-gray-200 shadow-md bg-white border-l-8 border-l-yellow-500" >
<p class="font-bold text-2xl my-2">Impossible App</p>
<div class="border-b w-full"></div>
<p class="mt-2 line-clamp-1"> Phasellus vulputate faucibus lectus, vitae ultrices orci. Nunc consectetur lacus id venenatis aliquam. Cras commodo lorem orci, sit amet posuere tortor posuere sit amet. Nunc porta tellus id ipsum varius mollis. Donec id convallis libero, a rutrum mi. Mauris quam tortor, aliquet a tortor id, vehicula euismod justo. Vestibulum ullamcorper sed nisl eu mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur interdum od </p>
</div>
<div class="p-4 h-fit w-full min-w-sm rounded-xl border border-gray-200 shadow-md bg-white border-l-8 border-l-yellow-500" >
<p class="font-bold text-2xl my-2">Ad Blocker</p>
<div class="border-b w-full"></div>
<p class="mt-2 line-clamp-1"> Pellentesque ex enim, auctor non tincidunt ut, pellentesque eget urna. Quisque quis nisl neque. Phasellus placerat ultrices sem, vel convallis erat elementum eu. Phasellus finibus malesuada quam, sed consequat augue sagittis eget. Phasellus auctor varius est eu tempor. Maecenas sollicitudin, lectus sit amet sagittis vestibulum, velit libero eleifend dolor, ut finibus risus nibh id dolor. Nullam in lectus dolor. Nulla vel arcu lorem. Ut eleifend, nulla vitae varius </p>
</div>
</div>
<div class="border-t mt-6 w-full"></div>
<div class="flex w-full min-w-sm justify-start">
<p class="font-bold text-2xl my-2">Your Projects</p>
</div>
<div class="p-4 h-fit w-full min-w-sm rounded-xl border border-gray-200 shadow-md bg-white border-l-8 border-l-yellow-500" >
<p class="font-bold text-2xl my-2">Site Maintanence</p>
<p class="mt-2 line-clamp-1 mb-2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<div class="border-b w-full"></div>
<p class="font-bold text-2xl my-2">Community Share Day</p>
<p class="mt-2 line-clamp-1 mb-2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<div class="border-b w-full"></div>
<p class="font-bold text-2xl my-2">Updated Privacy Policy</p>
<p class="mt-2 line-clamp-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="border-t my-6 w-full"></div>
<div class="p-4 h-fit w-full min-w-sm rounded-xl border border-gray-200 shadow-md bg-white border-l-8 border-l-yellow-500" >
<div class="flex flex-col gap-y-6">
<div class="flex justify-between">
<p class="font-bold text-xl my-2">Your Team</p>
<p class="text-purple-500 text-xl my-2">See all</p>
</div>
<div class="flex justify-evenly gap-x-3">
<img class="w-12" src="./images/person-profile.svg" />
<div class="flex flex-col justify-around ml-3">
<p class="text-gray-400">UI Designer</p>
<p class="font-bold text-xl">Billy Bob Lewis</p>
</div>
<img class="w-8" src="./images/more.svg" />
</div>
<div class="flex justify-evenly gap-x-3">
<img class="w-12" src="./images/person-profile.svg" />
<div class="flex flex-col justify-around ml-3">
<p class="text-gray-400">Front End Developer</p>
<p class="font-bold text-xl">Sarah Pligh</p>
</div>
<img class="w-8" src="./images/more.svg" />
</div>
<div class="flex justify-evenly gap-x-3">
<img class="w-12" src="./images/person-profile.svg" />
<div class="flex flex-col justify-around ml-3">
<p class="text-gray-400">Marketing Lead</p>
<p class="font-bold text-xl">Patrick Stewart</p>
</div>
<img class="w-8" src="./images/more.svg" />
</div>
</div>
</div>
<div class="border-t my-6 w-full"></div>
<div class="flex flex-col gap-y-4 w-full min-w-sm">
<div class="px-2 py-4 h-fit w-full min-w-sm rounded-xl border border-gray-200 shadow-md bg-white border-l-8 border-l-yellow-500" >
<div class="flex items-center justify-center justify-around">
<div class="flex items-center justify-center rounded-full w-12 h-12 bg-pink-500" >
<img class="scale-125" src="./images/credit_card.svg" />
</div>
<p class="font-bold text-xl my-2">Budget</p>
<p class="text-xl my-2">$750.00</p>
<div class="flex justify-center w-16 bg-green-300 rounded-md px-2" >
<p class="text-green-600">30%</p>
</div>
</div>
</div>
<div class="px-2 py-4 h-fit w-full min-w-sm rounded-xl border border-gray-200 shadow-md bg-white border-l-8 border-l-yellow-500" >
<div class="flex items-center justify-center justify-around">
<div class="flex items-center justify-center rounded-full w-12 h-12 bg-purple-500" >
<img class="scale-125" src="./images/users.svg" />
</div>
<p class="font-bold text-xl my-2">Projects</p>
<p class="text-xl my-2">215</p>
<div class="flex justify-center w-16 bg-green-300 rounded-md px-2" >
<p class="text-green-600">23%</p>
</div>
</div>
</div>
<div class="px-2 py-4 h-fit w-full min-w-sm rounded-xl border border-gray-200 shadow-md bg-white border-l-8 border-l-yellow-500" >
<div class="flex items-center justify-center justify-around">
<div class="flex items-center justify-center rounded-full w-12 h-12 bg-blue-500" >
<img class="scale-125" src="./images/clock.svg" />
</div>
<p class="font-bold text-xl my-2">Total Hours</p>
<p class="text-xl my-2">1.400</p>
<div class="flex justify-center w-16 bg-red-300 rounded-md px-2">
<p class="text-red-600">10%</p>
</div>
</div>
</div>
<div class="px-2 py-4 h-fit w-full min-w-sm rounded-xl border border-gray-200 shadow-md bg-white border-l-8 border-l-yellow-500" >
<div class="flex items-center justify-center justify-around">
<div class="flex items-center justify-center rounded-full w-12 h-12 bg-orange-500" >
<img class="scale-125" src="./images/briefcase.svg" />
</div>
<p class="font-bold text-xl my-2">Work Load</p>
<p class="text-xl my-2">95%</p>
<div class="flex justify-center w-16 bg-green-300 rounded-md px-2" >
<p class="text-green-600">13%</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

别慌，这个“神秘div”其实根本不是真实存在的DOM元素，是Chrome（或其他主流浏览器）开发者工具为了帮你调试flex布局，对匿名文本节点的可视化显示而已。

具体原因： #

你在flex容器（包裹home图标和p标签的那个div）里，img标签和p标签之间有换行、空格这些空白字符——浏览器会把这些空白字符解析成匿名文本节点，而flex布局会把容器里的所有子节点（包括这些文本节点）都当作flex项来处理。开发者工具为了让你能看到这些原本不可见的节点，就把它们渲染成了类似div的灰色占位符，但实际上它们只是文本节点，不是你编写的div元素。

验证方法： #

1. 在开发者工具里选中这个“div”，看右侧的DOM属性面板，它的节点类型会显示为Text，而不是Element；
2. 把img和p标签的代码写在同一行，去掉中间的换行和空格，比如改成这样：

<div class="flex flex-col cursor-pointer hover:scale-125 ease-in duration-300 w-12 items-center md:flex-row md:gap-x-4" >
<img class="scale-110" src="./images/home.svg" /><p class="hidden md:inline md:font-bold md:text-2xl md:my-2"> Home </p>
</div>

刷新页面后，这个“神秘div”就会消失了。

额外小建议： #

你的代码里重复引入了TailwindCSS的CDN脚本（head里有两行<script src="https://cdn.tailwindcss.com...">），虽然这不会直接导致这个问题，但可能引发其他潜在冲突，建议删掉其中一行，保留带plugins的那行就足够了：

<!-- 保留这一行 -->
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<!-- 删除下面这行重复的 -->
<!-- <script src="https://cdn.tailwindcss.com"></script> -->

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