使用 Tailwind Flex 打造响应式 React 导航栏：从移动端菜单到桌面端水平布局的完整实战

使用 Tailwind Flex 打造响应式 React 导航栏：从移动端菜单到桌面端水平布局的完整实战

【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine

本文以 TailwindCSS 的 Flexbox 工具类为核心，通过构建一个「移动端收起、md断点以上展开为水平导航栏」的 React 组件，完整演示flex-col、flex-row、justify-*、items-*、order-*、flex-{n}等工具类的组合用法，并涵盖 Flexbox 无障碍设计与性能优化最佳实践。读完本文你将掌握用 Tailwind 工具类（而非手写 CSS）快速实现响应式布局的完整方法论，并能在 Refine 生态（如 blog-refine-shadcn 示例）中以同样的方式组织页面骨架。

引言：为什么用 Tailwind 写 Flexbox

TailwindCSS 是一套以工具类（utility class）为核心的 CSS 框架，为布局、尺寸、颜色、排版等提供了大量开箱即用的工具类。其中最有价值的能力之一，就是为所有屏幕尺寸提供响应式变体（如md:、lg:），同时也支持元素状态变体（hover、focus、active等）。

CSS Flexbox 在 Tailwind 中被封装为一组直觉化、易记忆的工具类：一切以flex开启，配合justify-start、justify-center、items-start、items-center等定位类，以及flex-col、flex-row来切换主轴方向。

本文要构建的是一个可折叠的 React 导航栏（navbar）：在小于md（默认 768px）的屏幕上菜单垂直堆叠，在md及以上屏幕水平展开到顶部。核心思路是mobile-first（移动优先）：先用flex-col定义纵向布局，再在md处用flex-row切换为横向；同时使用order-last等顺序修饰符调整导航项顺序，用flex-{n}类让元素按比例伸缩占满空白空间。

关于断点数值，本仓库的 use-tw-breakpoints.ts 明确记录了 Tailwind 默认断点体系：xs: 360px、sm: 640px、md: 768px、lg: 1024px、xl: 1280px，本文中所有md:前缀均指 768px 及以上视口。

前置条件：初始化 React + TailwindCSS 项目

首先需要安装 Node.js 以初始化 React 应用。按以下步骤搭建项目：

1. 从终端进入目标目录，用 CRA 创建 React 应用并打开：

npx create-react-app flex-navbar code flex-navbar

2. 安装 TailwindCSS 并初始化tailwind.config.js：

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

3. 配置模板扫描路径（tailwind.config.js）：

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

4. 在 CSS 文件中加入 Tailwind 三层指令（本文将其放在src/styles/styles.css）：

/* CSS reset or normalizer code */ @tailwind base; @tailwind components; @tailwind utilities; /* TailwindCSS styles */

注意：Tailwind 指令必须放在 CSS 文件顶部、任何其他 Tailwind 类使用之前。

5. 以--watch模式运行编译脚本，让 Tailwind 持续监听并即时编译新增类：

npx tailwindcss -i ./src/styles/styles.css -o ./public/styles/styles.css --watch

6. 在./public/index.html中链接编译产物：

<link href="./styles/styles.css" rel="stylesheet" />

关于第 3 步的content配置，本仓库的 tailwind.config.js 给出了更完整的生产级示例——同时扫描./src/**/*.{js,jsx,ts,tsx}、./docs/**/*.{md,mdx,tsx}、./tutorial/**/*.{md,mdx,tsx}，并开启jit: true；blog-refine-shadcn 示例的 tailwind.config.js 则演示了 shadcn/ui 风格下对pages、components、app、src多目录的扫描。content列表覆盖所有「可能出现类名」的文件类型与路径，是确保工具类被正确编译的前提。

起始文件：一个已实现折叠逻辑的 Navbar

为了让本文专注于 Flex 类本身，我们从一个已处于折叠状态、间距与尺寸均已就绪的 Navbar 开始。App.tsx如下：

import React from "react"; import Navbar from "./components/Navbar"; function App() { return ( <div className="App"> <Navbar /> <main>{/*Lorem stuff here*/}</main> </div> ); } export default App;

<Navbar />初始组件

import React, { useState } from "react"; import { Avatar, HamburgerIcon, SearchIcon, TailzupLogo } from "./../icons"; import TailzupLogo from "../images/tailzup-logo.png"; const Navbar = () => { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const menuHidden = !isMobileMenuOpen ? "hidden md:block" : ""; return ( <nav className="navbar"> <div id="brand-wrapper" className="nav-wrapper"> <a className="brand" href="/"> <img src={TailzupLogo} width={180} height={62} alt="Tailzup logo" /> </a> </div> <div className={`${menuHidden} border-t border-slate-500 text-amber-50 transition-all duration-1000 ease-in-out md:border-none`} > <div id="items" className="my-2"> <div className="left mx-2 p-2"> <input className="text-input" type="email" placeholder="Find donald trump or something..." /> <SearchIcon /> </div> <div> <ul id="right" className=""> <li className="nav-item"> <a href="/"> <Avatar /> </a> </li> <li className="nav-item"> <a className="nav-link" href="/"> Home </a> </li> <li className="nav-item"> <a className="nav-link" href="/"> Friends </a> </li> <li className="nav-item"> <a className="nav-link" href="/"> Messages </a> </li> </ul> </div> </div> </div> <HamburgerIcon isMobileMenuOpen={isMobileMenuOpen} setIsMobileMenuOpen={setIsMobileMenuOpen} /> </nav> ); }; export default Navbar;

可以看到，垂直菜单的显示/隐藏逻辑已由isMobileMenuOpen状态实现（hidden md:block控制），间距、排版、配色也已通过navbar、nav-wrapper、brand、text-input等类完成，细节见下文 CSS。

样式文件

将以下样式复制到src/styles/styles.css：

@tailwind base; @tailwind components; @tailwind utilities; :root { --primary-color: rgb(223, 232, 247); --secondary-color: rgb(182, 76, 27); --grayscale: rgb(226, 218, 218); --friendly: green; --neutral: blue; --warning: yellow; --danger: crimson; --forbidden: black; } * { margin: 0; padding: 0; box-sizing: border-box; } body { min-width: 450px; } .navbar { @apply fixed mx-auto h-auto w-full bg-slate-600 px-2; } .nav-wrapper { @apply h-14 w-full bg-slate-600; } .brand { max-width: 12rem; color: var(--primary-color); @apply mx-2 block py-2 text-4xl; } .nav-item { @apply mx-2 w-full rounded p-1 transition-all hover:scale-105 hover:shadow hover:backdrop-brightness-125 lg:mx-8 lg:w-auto; } .nav-link { @apply p-1 text-center; } .text-input { @apply rounded-l border px-2 py-0.5 text-slate-800; } .avatar { width: 2rem; height: 2rem; color: whitesmoke; } .tailzup-logo { width: 4rem; height: 4rem; } .icon { width: 1.5rem; height: 1.5rem; color: whitesmoke; }

这段 CSS 大量使用了@apply指令（如.navbar内联fixed mx-auto h-auto w-full bg-slate-600 px-2），这正是 Tailwind 把工具类组合成「组件类」的官方方式。本仓库中同样能见到这种模式——blog-refine-shadcn 示例的 App.css 里用.layout { @apply flex flex-col md:flex-row gap-1; }、.menu { @apply ... flex justify-between items-center md:px-0 md:flex-col md:justify-start md:items-start ...; }定义响应式页面骨架，与本文的导航栏思路完全一致：移动端flex-col堆叠，桌面端flex-row展开。

图标组件

图标放在src/components/icons文件夹，本质是 Heroicons 的 JSX 标记，自带所需 Tailwind 样式：

import React from "react"; export const HamburgerIcon = ({ isMobileMenuOpen, setIsMobileMenuOpen }) => { return ( <div className={`absolute right-4 top-3 rounded border border-slate-500 p-1 text-slate-500 hover:bg-slate-500 hover:text-slate-300 md:hidden`} onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} > <a href="/"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-6 w-6" > <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5" /> </svg> </a> </div> ); }; export const Avatar = () => { return ( <a href="/"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="avatar" > <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /> </svg> </a> ); }; export const SearchIcon = () => { return ( <button className="duration-50 rounded-r border px-2 py-0.5 transition ease-in-out hover:rounded-r hover:border-slate-400 hover:bg-slate-500" href="/" > <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="icon" > <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /> </svg> </button> ); };

至此，运行npm run start，在小于md的屏幕上可以看到垂直菜单与可正常工作的折叠按钮。此时导航栏内部各div与无序列表仍处于 Block Formatting Context（块级格式化上下文）中——因为<Navbar />还没有任何 flex 样式。

用 Tailwind Flex 类给导航栏「上劲」

采用**从内到外（inside-out）**的改造顺序：先处理内层 flex 容器，再逐级向上组合兄弟容器。

导航项：flex 列转行 + 顺序调整

对<ul>列表及其项应用移动优先策略：小屏flex-col垂直堆叠、左上对齐（这是列布局的默认行为，无需额外定位类）；md起转为水平行、justify-start左对齐、items-center垂直居中：

<div> <ul id="right" className="flex flex-col md:flex-row md:justify-start md:items-center" > <li className="nav-item md:order-last"> <a href="/"> <Avatar /> </a> </li> <li className="nav-item"> <a className="nav-link" href="/"> Home </a> </li> <li className="nav-item"> <a className="nav-link" href="/"> Friends </a> </li> <li className="nav-item"> <a className="nav-link" href="/"> Messages </a> </li> </ul> </div>

注意<Avatar />所在的<li>是小屏上的第一项，通过md:order-last在md及以上将其排到水平导航栏的末尾。order-{n}系列类（order-first、order-last、order-none、order-{number}）在保持 DOM 顺序不变的前提下重排视觉顺序，这在响应式场景下非常实用。

搜索栏：内层 Flex + 外层换序

先让搜索框输入框与图标始终水平、垂直居中地排列在一起：

<div className="left mx-2 flex items-center justify-center p-2" > <input className="text-input" type="email" placeholder="Find danielle trump or sth..." /> <SearchIcon /> </div>

再处理搜索栏与导航列表的定位关系：小屏flex-col时二者从左上角垂直堆叠，md起转为水平、从起点对齐、垂直居中。这里对搜索栏容器再次使用顺序类order-last md:order-none——小屏时把搜索栏压到底部，md起恢复为第一个位置：

<div id="items" className="my-2 flex flex-col items-start justify-start md:flex-row md:items-center md:justify-start" > <div className="left order-last mx-2 flex items-center justify-center p-2 md:order-none" > <input className="text-input" type="email" placeholder="Find danield trump or st..." /> <SearchIcon /> </div> <div> <ul id="right" className="flex flex-col md:flex-row md:items-center md:justify-start" > <li className="nav-item md:order-last"> <a href="/"> <Avatar /> </a> </li> <li className="nav-item"> <a className="nav-link" href="/"> Home </a> </li> <li className="nav-item"> <a className="nav-link" href="/"> Friends </a> </li> <li className="nav-item"> <a className="nav-link" href="/"> Messages </a> </li> </ul> </div> </div>

经过这两步，垂直导航栏的形态已经基本成型，具备了在水平与垂直之间来回「发力」的骨架。

Logo 定位：flex-1让品牌区域吸收剩余空间

先保证id="brand-wrapper"内部元素始终水平、垂直居中：

<div id="brand-wrapper" className="nav-wrapper flex justify-start items-center flex-1 self-start" > <a className="brand" href="/"> <img src={TailzupLogo} width={180} height={62} alt="Tailzup logo" /> </a> </div>

flex-1对应flex: 1 1 0%，让brand-wrapper这个div始终吸收所有剩余空间（常配合父容器的flex使用）。self-start则让它在交叉轴上顶到起点。

父级nav：md起左右分布

最后在父级<nav>上，小屏让品牌区与其他项垂直堆叠，md起水平排布并在两端分布、垂直居中：

<nav className="navbar flex flex-col justify-start md:flex-row md:items-center md:justify-between" > <div className="nav-wrapper flex flex-1 items-center justify-start self-start"> <a className="brand" href="/"> <img src={TailzupLogo} width={180} height={62} alt="Tailzup logo" /> </a> </div> <div className={`${menuHidden} border-t border-slate-500 text-amber-50 transition-all duration-1000 ease-in-out md:border-none`} > <div id="items" className="my-2 flex flex-col items-start justify-start md:flex-row md:items-center md:justify-start" > <div className="left order-last mx-2 flex items-center justify-center p-2 md:order-none"> <input className="text-input" type="email" placeholder="Find danielle trump or stormy..." /> <SearchIcon /> </div> <div> <ul id="right" className="flex flex-col md:flex-row md:items-center md:justify-start" > <li className="nav-item md:order-last"> <a href="/"> <Avatar /> </a> </li> <li className="nav-item"> <a className="nav-link" href="/"> Home </a> </li> <li className="nav-item"> <a className="nav-link" href="/"> Friends </a> </li> <li className="nav-item"> <a className="nav-link" href="/"> Messages </a> </li> </ul> </div> </div> </div> <HamburgerIcon isMobileMenuOpen={isMobileMenuOpen} setIsMobileMenuOpen={setIsMobileMenuOpen} /> </nav>

flex flex-col justify-start md:flex-row md:justify-between md:items-start的含义是：小屏品牌区堆叠在其他项上方，md起三项（品牌区、菜单区、汉堡按钮）水平分布、两端对齐并垂直居中。

最终<Navbar />组件

import React, { useState } from "react"; import { Avatar, HamburgerIcon, SearchIcon } from "./icons"; import TailzupLogo from "../images/tailzup-logo.png"; const Navbar = () => { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const isMenuHidden = !isMobileMenuOpen ? "hidden md:block" : ""; return ( <nav className="navbar flex flex-col justify-start md:flex-row md:items-center md:justify-between"> <div id="brand-wrapper" className="nav-wrapper flex flex-1 flex-nowrap items-center justify-start self-start" > <a className="brand" href="/"> <img src={TailzupLogo} width={180} height={62} alt="Tailzup logo" /> </a> </div> <div className={`${isMenuHidden} border-t border-slate-500 text-amber-50 transition-all duration-1000 ease-in-out md:border-none`} > <div id="items" className="my-2 flex flex-col items-start justify-start md:flex-row md:items-center md:justify-start" > <div className="left order-last mx-2 flex items-center justify-center p-2 md:order-none"> <input className="text-input" type="email" placeholder="Find all trump or storm his estates..." /> <SearchIcon /> </div> <div> <ul id="right" className="flex flex-col md:flex-row md:items-center md:justify-start" > <li className="nav-item md:order-last"> <a href="/"> <Avatar /> </a> </li> <li className="nav-item"> <a className="nav-link" href="/"> Home </a> </li> <li className="nav-item"> <a className="nav-link" href="/"> Friends </a> </li> <li className="nav-item"> <a className="nav-link" href="/"> Messages </a> </li> </ul> </div> </div> </div> <HamburgerIcon isMobileMenuOpen={isMobileMenuOpen} setIsMobileMenuOpen={setIsMobileMenuOpen} /> </nav> ); }; export default Navbar;

这个「flex-col打底 +md:flex-row反转」的模式在真实项目中非常常见。以本仓库的文档站为例，blog-header.tsx 的顶栏就是flex h-full w-full items-center justify-between，配合自定义断点（blog-md:max-w-[672px]、blog-lg:max-w-[896px]、blog-max:max-w-[1200px]）实现内容区自适应宽度；而 tailwind.config.js 中的screens扩展（如blog-md: 720px、landing-md: 960px）说明：响应式断点并非只能使用默认的md/lg/xl，完全可以按设计系统自定义命名。

Flexbox 无障碍（Accessibility）注意事项

Flexbox 布局越复杂，越需要保证无障碍可访问性：

键盘导航（Keyboard Navigation）

确保 Flex 容器内所有元素都可通过键盘 Tab 到达，且 Tab 顺序符合界面的逻辑阅读顺序。可通过管理tabindex实现：

<div class="flex-container" tabindex="0"> <div class="flex-item" tabindex="0"> Item 1 </div> <div class="flex-item" tabindex="0"> Item 2 </div> <div class="flex-item" tabindex="0"> Item 3 </div> </div>

焦点管理（Focus Management）

布局动态变化、内容位移时，应通过 JavaScript 或 Tailwind 的focus相关工具类管理焦点态，高亮当前聚焦元素：

<button class="focus:outline-none focus:ring-2 focus:ring-blue-500"> Click Me </button>

ARIA 角色与标签（ARIA Roles and Labels）

为屏幕阅读器提供正确的语义角色与可访问名称——例如导航栏使用role="navigation"，交互元素用aria-label描述用途：

<nav aria-label="Main Navigation" role="navigation"> <ul class="flex"> <li> <a href="/" aria-label="Home"> Home </a> </li> <li> <a href="/about" aria-label="About Us"> About </a> </li> <li> <a href="/contact" aria-label="Contact Us"> Contact </a> </li> </ul> </nav>

响应式变化中的可达性（Responsive Considerations）

布局随视口宽度变化时，必须保证这种变化本身是可访问的。例如小屏菜单折叠时，要提供明确的展开入口（按钮或链接），并用aria-expanded标注展开状态：

<button aria-expanded="false" aria-controls="menu" class="md:hidden"> Menu </button> <nav id="menu" class="hidden md:flex"> <!-- menu items here --> </nav>

这里aria-controls="menu"将按钮与id="menu"的导航区域关联，aria-expanded同步折叠/展开状态，正是本文导航栏折叠按钮在生产环境中应补充的语义。

性能优化最佳实践

避免布局偏移（Avoid Layout Shifts）

元素在页面加载过程中发生位移会引发 Layout Shift（CLS）。给 Flex 容器与子项设置明确尺寸，让浏览器提前得知空间分配：

.flex-item { width: 100px; height: 100px; }

使用 Tailwind 的 JIT（Just-In-Time）模式

JIT 模式只生成实际使用到的 CSS，显著压缩产物体积、加快页面加载。在tailwind.config.js中开启：

module.exports = { mode: "jit", // The rest of your Tailwind config };

本仓库的 tailwind.config.js 即开启了jit: true，并通过content数组指定扫描范围——JIT 生效的前提正是content精确覆盖所有使用类名的源文件。

优化关键渲染路径（Critical Rendering Path）

优先加载首屏（above-the-fold）关键内容，避免首屏 CSS/JS 阻塞渲染。一种做法是把关键 CSS 直接内联进 HTML：

<style> .critical-class { /* Critical CSS here */ } </style>

懒加载非必需内容（Lazy Load Non-essential Content）

对图片等非必需内容使用懒加载，使其进入视口时才加载，降低首屏时间并节省带宽：

<img src="image.jpg" loading="lazy" alt="Lazy-loaded image placeholder" />

用 PurgeCSS 剔除未使用类

PurgeCSS 可丢弃代码库中未被使用的 CSS 类，进一步压缩文件体积。在 Tailwind 中通过配置即可启用（在支持该选项的版本中）：

module.exports = { purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], // the rest of your Tailwind config };

提示：从 Tailwind v3 起，purge选项已被content取代（JIT 模式内置了按需生成与无用类清理），本仓库两个配置文件均使用content声明扫描路径，这也是当前版本推荐的写法。

总结

本文用 Tailwind Flex 工具类构建了一个可折叠、响应式的 React 导航栏：移动端菜单默认隐藏，可通过汉堡按钮切换（hidden md:block+isMobileMenuOpen状态），md及以上自动升为水平导航条。

整个过程中我们逐步应用了：

• 方向控制：flex-col与flex-row分别对应flex-direction: column与flex-direction: row，配合md:前缀实现移动优先的断点切换；
• 定位类：justify-center、justify-start、justify-between、items-center、items-start、self-start等在主轴/交叉轴上精确摆放 flex 子项；
• 顺序类：order-last、order-none在保持 DOM 结构不变的前提下调整视觉顺序，例如小屏把搜索栏排到底部、md起还原到首位；
• 伸缩类：flex-1让 Logo 容器吸收所有剩余空间，实现品牌区始终占据左侧空白。

这套「移动端flex-col堆叠、桌面端flex-row展开 +order-*换序 +flex-{n}伸缩」的组合拳，可以推广到任何响应式页面骨架的搭建中——正如本仓库 blog-refine-shadcn 示例 的 App.css 用同样手法组织布局一样。再叠加本文介绍的无障碍（键盘导航、焦点管理、ARIA 语义、aria-expanded）与性能（防布局偏移、JIT/按需生成、关键路径优化、懒加载）实践，一个响应式导航栏乃至整页布局就能同时具备良好的可用性与性能表现。

【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine