使用Tailwind CSS时Flex样式失效，电影网站Header组件布局求助

我正在开发一个电影网站，创建了Header组件，但其中的Flex样式未正常生效，同时希望实现参考图里的可弹出移动端导航栏。当前实际效果中导航布局不符合预期，以下是相关代码：

header.tsx #

function Header() {
    return (
        <header>
             <div className="flex items-start space-x-2 md:space-x-10">
                <img src= "doctorstrange.jpeg"
                width={100}
                height={100}
                className="cursor-pointer object-contain"
                />

            <ul className="hidden space-x-4 md:flex">
                <li className="headerLink">Home</li>
                <li className="headerLink">Movies</li>
                <li className="headerLink">Videos</li>
                <li className="headerLink">FAQ</li>
                <li className="headerLink">Pricing</li>
            </ul>
          </div>

            <div>
                
            </div>
        </header>
    )
}

export default Header

global.css #

@tailwind base;
@tailwind components;
@tailwind utilities;
 
/*body, header*/

@layer base{
    body{
        @apply bg-[#141414] text-white;

    }
    @layer components {
        .headerLink {
            @apply cursor-pointer text-sm font-light text-[#e5e5e5] transition duration-[.4]
            hover:text-[#b3b3b3];
        }
    }
}

index.tsx #

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import Header from '../component/header'

const Home: NextPage = () => {
  return (
    <div>
      <Head>
        <title>Pcarimovie</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header/>

    <main className=""> 

{/*Banner*/}
      <section>
{/*Row*/}
{/*Row*/}
{/*Row*/}
{/*Row*/}
{/*Row*/}
{/*Row*/}
      </section>
      
    </main>
    
    </div>
    
  )
}

export default Home

当前实际效果中，桌面端导航项未与Logo横向排列，移动端无弹出导航栏功能；期望实现桌面端Logo与导航项横向对齐，移动端点击按钮弹出导航栏的效果。

解决方案 #

1. 修复Tailwind层级嵌套问题

原global.css中@layer components嵌套在@layer base内，违反Tailwind规则，导致样式优先级异常。修改后代码：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base{
    body{
        @apply bg-[#141414] text-white;
    }
}

@layer components {
    .headerLink {
        @apply cursor-pointer text-sm font-light text-[#e5e5e5] transition duration-[.4] hover:text-[#b3b3b3];
    }
}

2. 重构Header组件实现Flex布局与移动端导航

添加状态管理控制菜单显示，调整布局结构实现响应式效果：

import { useState } from 'react';

function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <header className="flex justify-between items-center p-4 bg-[#141414]">
      <div className="flex items-center space-x-2 md:space-x-10">
        <img 
          src="doctorstrange.jpeg"
          width={100}
          height={100}
          className="cursor-pointer object-contain"
          alt="网站Logo"
        />

        {/* 桌面端导航 */}
        <ul className="hidden space-x-4 md:flex">
          <li className="headerLink">Home</li>
          <li className="headerLink">Movies</li>
          <li className="headerLink">Videos</li>
          <li className="headerLink">FAQ</li>
          <li className="headerLink">Pricing</li>
        </ul>
      </div>

      {/* 移动端汉堡按钮 */}
      <button 
        className="md:hidden text-white text-xl"
        onClick={() => setIsMenuOpen(!isMenuOpen)}
      >
        ☰
      </button>

      {/* 移动端下拉菜单 */}
      {isMenuOpen && (
        <div className="absolute top-20 left-0 right-0 bg-[#141414] p-4 md:hidden">
          <ul className="space-y-4">
            <li className="headerLink">Home</li>
            <li className="headerLink">Movies</li>
            <li className="headerLink">Videos</li>
            <li className="headerLink">FAQ</li>
            <li className="headerLink">Pricing</li>
          </ul>
        </div>
      )}
    </header>
  )
}

export default Header

关键说明

• 给header标签添加flex justify-between items-center，让内部元素横向对齐且两端分布
• 用useState实现移动端菜单的显示/隐藏切换
• 汉堡按钮仅在移动端显示（md:hidden），下拉菜单通过绝对定位覆盖页面顶部
• 确保Tailwind配置文件（tailwind.config.js）已正确配置Next.js路径：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

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