Tailwind: 撸一个响应式的纯CSS导航栏

你可以点击这里查看代码和效果：

话不多说，直接开撸：

<div class="bg-white shadow" id="navbar-cta">
  <nav class="group container relative mx-auto flex items-center justify-between space-x-4 py-5 px-3" id="navbar">
    <a href="https://axum.rs" class="flex items-center justify-start space-x-2" id="logo">
      <img src="https://file.axum.rs/asset/logo.png" alt="LOGO" class="block w-6 object-cover" />
      <h2>AXUM中文网</h2>
    </a>

    <ul id="navbar-menu" class="absolute right-1 top-[4.05rem] z-10 hidden w-full flex-col items-center justify-center bg-white px-3 shadow-md group-hover:flex md:static md:flex md:w-auto md:flex-row md:space-y-0 md:space-x-4 md:shadow-none">
      <li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">首页</a></li>
      <li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">专题</a></li>
      <li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">标签</a></li>
      <li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">文章</a></li>
      <li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">关于</a></li>
    </ul>

    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:hidden" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
    </svg>
  </nav>
</div>

• #navbar-cta：导航栏容器，设置了白色背景和阴影
• #navbar
  • group：启用分组功能
  • container：使用容器类
  • relative：相对定位
  • mx-auto：水平居中
  • flex items-center justify-between space-x-4：flex水平布局，子元素在水平方向两侧分布并垂直居中，水平间隙为4
  • py-5 px-3：垂直内边距为5，水平内边距为3
• #navbar-menu
  • absolute right-1 top-[4.05rem]
    • 绝对定位
    • 右方1个单位
    • 上方4.05rem。tailwind 允许这种直接传递值的方式。当 tailwind 预置的值不能满足需求时，可以用这种方式
  • z-10：z-index 为 10
  • hidden：隐藏元素
  • w-full：宽度占满父容器
  • flex-col：flex 垂直布局
  • items-center justify-center：垂直居中，居中分布
  • bg-white px-3 shadow-md：白色背景，水平方向内边距为3，大小为md的阴影
  • group-hover:flex：监听分组的 hover 事件，使用 flex 布局
  • md:static md:flex md:w-auto md:flex-row md:space-y-0 md:space-x-4 md:shadow-none：在 md 断点设置：
    • 静态定位（top/left/right/bottom将失效）
    • flex 布局
    • flex 水平布局
    • 垂直间隙为0
    • 水平间隙为4
    • 去除阴影
• #navbar-menu > li：分别设置垂直和水平方向的内边距，在 md 断点取消所有内边距
• #navbar-menu > li > a：显示为块级元素；鼠标悬停时：
  • 设置文字颜色为600号红色
  • 显示下划线
  • 将下划线的颜色设置为600号红色（如果和文字颜色，这个可以不设置，本如本例）
• svg：设置高度和宽度；在 md 断点隐藏

• group：启用分组功能
• container：使用容器类
• relative：相对定位
• mx-auto：水平居中
• flex items-center justify-between space-x-4：flex水平布局，子元素在水平方向两侧分布并垂直居中，水平间隙为4
• py-5 px-3：垂直内边距为5，水平内边距为3

• absolute right-1 top-[4.05rem]
  • 绝对定位
  • 右方1个单位
  • 上方4.05rem。tailwind 允许这种直接传递值的方式。当 tailwind 预置的值不能满足需求时，可以用这种方式
• z-10：z-index 为 10
• hidden：隐藏元素
• w-full：宽度占满父容器
• flex-col：flex 垂直布局
• items-center justify-center：垂直居中，居中分布
• bg-white px-3 shadow-md：白色背景，水平方向内边距为3，大小为md的阴影
• group-hover:flex：监听分组的 hover 事件，使用 flex 布局
• md:static md:flex md:w-auto md:flex-row md:space-y-0 md:space-x-4 md:shadow-none：在 md 断点设置：
  • 静态定位（top/left/right/bottom将失效）
  • flex 布局
  • flex 水平布局
  • 垂直间隙为0
  • 水平间隙为4
  • 去除阴影

• 绝对定位
• 右方1个单位
• 上方4.05rem。tailwind 允许这种直接传递值的方式。当 tailwind 预置的值不能满足需求时，可以用这种方式

• 静态定位（top/left/right/bottom将失效）
• flex 布局
• flex 水平布局
• 垂直间隙为0
• 水平间隙为4
• 去除阴影