NextJs+Tailwind头部样式问题：移动端Logo未居中且联系信息未隐藏

你的代码存在两个核心问题，同时可以做一处优化：

1. 联系信息显示逻辑颠倒
   原代码中联系信息的sm:hidden md:flex是错误的——Tailwind的前缀代表「最小宽度阈值」，sm:hidden意味着屏幕宽度≥640px时隐藏元素，这和你要的「小屏隐藏、大屏显示」完全相反。应该改为hidden md:flex，这样屏幕宽度<768px（md的阈值）时隐藏，≥768px时显示。

2. Logo未居中的布局问题
   父容器的justify-between会在小屏时让Logo贴左侧，因为右侧元素虽然隐藏，但布局逻辑还是保持两端对齐。需要把父容器的对齐方式改为小屏时居中、大屏时两端对齐，即justify-center md:justify-between。

3. 代码优化（可选）
   把内联的font-size: "12px"替换为Tailwind的text-xs类，保持样式代码的一致性。

修改后的完整代码：

import React from "react";
import Image from "next/image";
import { ShoppingBasket } from "lucide-react";

const AppHeader: React.FC = () => {
  return (
    <header className="bg-[#212529] border-b border-white sm:h-[77px] lg:h-[91px]">
      <div className="container mx-auto px-4 flex justify-center md:justify-between items-center h-full">
        <div className="flex items-center">
          <Image
            src="/path-to-your-logo.png"
            alt="Logo"
            width={190}
            height={57}
            className="sm:w-[166px] sm:h-[50px] lg:w-[190px] lg:h-[57px]"
          />
        </div>
        <div className="hidden md:flex items-center space-x-4">
          <div className="flex flex-col font-medium text-white font-montserrat text-xs">
            <span>1503 Kelly's.</span>
            <span>Clove SC 78620</span>
            <span>(704) 777-7777</span>
            <span>2131@gmail.com</span>
          </div>
          <div className="border-l h-[48px]"></div>
          <ShoppingBasket className="text-white h-8 w-8" />
        </div>
      </div>
    </header>
  );
};

export default AppHeader;

内容的提问来源于stack exchange，提问作者Pastor J.G Seigle