flowbite-react导航栏始终折叠问题求助

核心修复方案 #

1. 确认Flowbite样式正确导入 #

在Next.js的全局样式文件（如app/globals.css）中，必须包含Tailwind基础样式和Flowbite的CSS导入：

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

@import "flowbite-react/main.css";

2. 完善Tailwind配置 #

检查tailwind.config.js，确保已添加Flowbite的内容路径和插件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    // 必须添加Flowbite组件的内容路径
    "./node_modules/flowbite-react/**/*.js"
  ],
  plugins: [
    // 必须注册Flowbite插件
    require('flowbite/plugin')
  ],
}

3. 重启开发服务器 #

修改配置后，关闭当前开发服务，重新执行npm run dev，避免缓存导致样式不生效。

4. 排查样式冲突 #

如果上述步骤无效，检查自定义CSS是否覆盖了Flowbite导航栏的响应式类（比如误加了hidden类或修改了md:前缀的样式）。

用户问题详情 #

用户完成Flowbite React的Next.js配置后，复制了带下拉菜单的导航栏代码，但导航栏无论屏幕尺寸如何始终处于折叠状态：

导航栏代码

"use client";

import { Avatar, Dropdown, Navbar } from "flowbite-react";

export function Nav() {
    return (
        <Navbar fluid>
            <Navbar.Brand href="https://flowbite-react.com">
                <img
                    src="/favicon.svg"
                    className="mr-3 h-6 sm:h-9"
                    alt="Flowbite React Logo"
                />
                <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
                    Flowbite React
                </span>
            </Navbar.Brand>
            <div className="flex md:order-2">
                <Dropdown
                    arrowIcon={false}
                    inline
                    label={
                        <Avatar
                            alt="User settings"
                            img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
                            rounded
                        />
                    }
                >
                    <Dropdown.Header>
                        <span className="block text-sm">Bonnie Green</span>
                        <span className="block truncate text-sm font-medium">
                            name@flowbite.com
                        </span>
                    </Dropdown.Header>
                    <Dropdown.Item>Dashboard</Dropdown.Item>
                    <Dropdown.Item>Settings</Dropdown.Item>
                    <Dropdown.Item>Earnings</Dropdown.Item>
                    <Dropdown.Divider />
                    <Dropdown.Item>Sign out</Dropdown.Item>
                </Dropdown>
                <Navbar.Toggle />
            </div>
            <Navbar.Collapse>
                <Navbar.Link href="#" active>
                    Home
                </Navbar.Link>
                <Navbar.Link href="#">About</Navbar.Link>
                <Navbar.Link href="#">Services</Navbar.Link>
                <Navbar.Link href="#">Pricing</Navbar.Link>
                <Navbar.Link href="#">Contact</Navbar.Link>
            </Navbar.Collapse>
        </Navbar>
    );
}

移动端效果

桌面端效果

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