React+Tailwind Header组件顶部细线移除方案求助

我用React结合Tailwind CSS编写了如下Header组件代码：

class Header extends Component {
  render() {
    return (
      <div className="flex flex-row bg-purple_death h-14 m-0 p-0">
        <div className="flex flex-row justify-around items-center w-1/4">
          <button className=" border border-black hover:rounded">
            <BsJustify className="text-4xl" />
          </button>
          <div className="text-2xl">home</div>
        </div>
        <div className="w-full bg-grayish">
          <div className="searchbar"></div>
        </div>
        <div className="flex flex-row justify-around items-center w-1/4">
          <div className="text-2xl">Sign In</div>
          <div className="text-2xl">tr</div>
          <button className="w-20 h-10 hover:rounded-full bg-slate-400 text-2xl">
            dark
          </button>
        </div>
      </div>
    );
  }
}
export default Header;

渲染后Header顶部出现了一条细线，我已尝试为父div添加Tailwind的m-0和p-0类，且更换浏览器测试，问题仍未解决，请问该如何移除这条细线？

解决方案： #

• 重置全局body默认间距：浏览器默认会给body元素添加8px左右的margin-top，这是最常见的原因。可以直接在根组件给body加上m-0类，或者在Tailwind的全局样式中重置：

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  
  @layer base {
    body {
      @apply m-0 p-0;
    }
  }
  

• 检查父容器样式：确认Header的父组件（比如App的根div）有没有设置额外的padding或margin，如果有需要一并清除。
• 排查自定义类冲突：代码中使用了bg-purple_death、bg-grayish这类自定义颜色类，检查这些自定义配置是否意外添加了边框或内边距属性。
• 利用开发者工具定位：打开浏览器F12开发者工具，选中Header顶部的间隙区域，查看元素的盒模型，精准定位间隙来源的元素，再针对性清除对应的margin/padding/border。

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