学习目标

  1. 掌握使用Tailwind CSS实现GitHub仓库详情页的整体布局
  2. 学习如何构建文件浏览列表与导航栏
  3. 实现仓库概览信息区域，包括统计数据和贡献者展示
  4. 理解如何使用Tailwind创建GitHub特有的按钮、标签和状态指示器
  5. 学习响应式设计原则，确保页面在不同设备上的良好表现

页面分析

GitHub仓库详情页是用户与代码库交互的核心界面，它包含以下主要区域：

  1. 顶部导航栏 - 包含GitHub logo、搜索框和用户菜单
  2. 仓库信息头部 - 展示仓库名称、可见性和统计数据
  3. 仓库导航菜单 - 提供Code、Issues、PR等功能入口
  4. 分支选择器与约束导航 - 用于切换分支和文件路径导航
  5. 文件浏览区 - 展示目录与文件列表
  6. 自述文件(README)预览 - 显示仓库的介绍文档
  7. 右侧边栏 - 提供About、Release、Contributors等信息

实现步骤

第1步：准备HTML骨架与Tailwind配置

首先创建一个基础HTML文件，并引入Tailwind CSS和Heroicons：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>GitHub 仓库详情页 - Tailwind CSS 复刻</title>
  7.   <!-- 引入Tailwind CSS -->
  8.   <script src="https://cdn.tailwindcss.com"></script>
  9.   <!-- 配置Tailwind为GitHub风格 -->
  10.   <script>
  11.     tailwind.config = {
  12.       theme: {
  13.         extend: {
  14.           colors: {
  15.             'github-blue': '#0969da',
  16.             'github-green': '#2da44e',
  17.             'github-red': '#cf222e',
  18.             'github-yellow': '#bf8700',
  19.             'github-purple': '#8250df',
  20.             'github-bg': '#f6f8fa',
  21.             'github-border': '#d0d7de',
  22.             'github-text': '#24292f',
  23.             'github-text-secondary': '#57606a',
  24.           },
  25.         },
  26.       },
  27.     }
  28.   </script>
  29.   <!-- 引入Heroicons -->
  30.   <script src="https://unpkg.com/heroicons@2.0.18/dist/24/outline.js"></script>
  31. </head>
  32. <body class="bg-white text-github-text">
  33.   <!-- 页面内容将在这里构建 -->
  34. </body>
  35. </html>

第2步：实现顶部导航栏

GitHub的顶部导航栏包含logo、搜索框和用户功能区：

  1. <!-- 顶部导航栏 -->
  2. <header class="bg-white border-b border-github-border">
  3.   <div class="container mx-auto px-4 sm:px-6 lg:px-8">
  4.     <div class="flex justify-between h-16">
  5.       <!-- 左侧: Logo和搜索框 -->
  6.       <div class="flex items-center">
  7.         <a href="#" class="flex-shrink-0">
  8.           <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" class="fill-current">
  9.             <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
  10.           </svg>
  11.         </a>
  13.         <!-- 搜索框 -->
  14.         <div class="ml-4 w-full max-w-md">
  15.           <div class="relative">
  16.             <input type="text" placeholder="Type / to search" class="w-full h-9 pl-3 pr-8 text-sm border border-github-border rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-github-blue focus:border-github-blue">
  17.             <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-github-text-secondary">
  18.               <span class="text-xs border border-github-border rounded px-1">/</span>
  19.             </div>
  20.           </div>
  21.         </div>
  22.       </div>
  24.       <!-- 右侧: 功能图标和用户头像 -->
  25.       <div class="flex items-center">
  26.         <button class="p-1 text-github-text-secondary hover:text-github-text ml-4">
  27.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
  28.             <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
  29.           </svg>
  30.         </button>
  32.         <button class="p-1 text-github-text-secondary hover:text-github-text ml-4">
  33.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
  34.             <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
  35.           </svg>
  36.         </button>
  38.         <img src="https://github.com/identicons/user.png" alt="User avatar" class="w-8 h-8 rounded-full ml-4">
  39.       </div>
  40.     </div>
  41.   </div>
  42. </header>

第3步：实现仓库信息头部

仓库信息头部显示仓库名称、可见性标签和基本统计信息：

  1. <!-- 仓库信息头部 -->
  2. <div class="border-b border-github-border bg-white">
  3.   <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
  4.     <div class="flex flex-col sm:flex-row sm:items-center">
  5.       <!-- 仓库标题与可见性 -->
  6.       <div class="flex items-center">
  7.         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-github-text-secondary">
  8.           <path stroke-linecap="round" stroke-linejoin="round" d="M3 8.25V18a2.25 2.25 0 0 0 2.25 2.25h13.5A2.25 2.25 0 0 0 21 18V8.25m-18 0V6a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 6v2.25m-18 0h18M5.25 6h.008v.008H5.25V6Z" />
  9.         </svg>
  11.         <div class="ml-2 flex flex-wrap items-center">
  12.           <a href="#" class="text-sm font-semibold text-github-blue hover:underline">username</a>
  13.           <span class="mx-1 text-github-text-secondary">/</span>
  14.           <a href="#" class="text-sm font-semibold text-github-blue hover:underline">repository-name</a>
  15.           <span class="ml-2 text-xs font-medium rounded-full border border-github-border px-2 py-0.5 bg-github-bg text-github-text-secondary">Public</span>
  16.         </div>
  17.       </div>
  19.       <!-- 仓库统计信息 -->
  20.       <div class="flex mt-3 sm:mt-0 sm:ml-auto space-x-4">
  21.         <!-- 通知按钮 -->
  22.         <div class="flex items-center">
  23.           <button class="flex items-center text-xs border border-github-border rounded-md bg-github-bg hover:bg-gray-100 px-3 py-1">
  24.             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  25.               <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
  26.             </svg>
  27.             Notifications
  28.           </button>
  29.         </div>
  31.         <!-- Fork按钮 -->
  32.         <div class="flex items-center">
  33.           <button class="flex items-center text-xs border border-github-border rounded-md bg-github-bg hover:bg-gray-100 px-3 py-1">
  34.             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  35.               <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
  36.             </svg>
  37.             Fork
  38.             <span class="ml-1 rounded-full bg-gray-200 px-2">238</span>
  39.           </button>
  40.         </div>
  42.         <!-- Star按钮 -->
  43.         <div class="flex items-center">
  44.           <button class="flex items-center text-xs border border-github-border rounded-md bg-github-bg hover:bg-gray-100 px-3 py-1">
  45.             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  46.               <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
  47.             </svg>
  48.             Star
  49.             <span class="ml-1 rounded-full bg-gray-200 px-2">4.2k</span>
  50.           </button>
  51.         </div>
  52.       </div>
  53.     </div>
  54.   </div>
  55. </div>

第4步：实现仓库导航菜单

导航菜单提供访问仓库不同功能的入口：

  1. <!-- 仓库导航菜单 -->
  2. <div class="bg-white border-b border-github-border">
  3.   <div class="container mx-auto px-4 sm:px-6 lg:px-8">
  4.     <nav class="flex overflow-x-auto">
  5.       <!-- Code -->
  6.       <a href="#" class="px-3 py-3 text-sm font-semibold border-b-2 border-github-blue flex items-center text-github-text whitespace-nowrap">
  7.         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  8.           <path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
  9.         </svg>
  10.         Code
  11.       </a>
  13.       <!-- Issues -->
  14.       <a href="#" class="px-3 py-3 text-sm font-medium flex items-center text-github-text-secondary hover:text-github-text whitespace-nowrap">
  15.         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  16.           <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
  17.         </svg>
  18.         Issues
  19.         <span class="ml-1 rounded-full bg-gray-200 px-2 text-xs">43</span>
  20.       </a>
  22.       <!-- Pull Requests -->
  23.       <a href="#" class="px-3 py-3 text-sm font-medium flex items-center text-github-text-secondary hover:text-github-text whitespace-nowrap">
  24.         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  25.           <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
  26.         </svg>
  27.         Pull requests
  28.         <span class="ml-1 rounded-full bg-gray-200 px-2 text-xs">12</span>
  29.       </a>
  31.       <!-- Actions -->
  32.       <a href="#" class="px-3 py-3 text-sm font-medium flex items-center text-github-text-secondary hover:text-github-text whitespace-nowrap">
  33.         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  34.           <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
  35.         </svg>
  36.         Actions
  37.       </a>
  39.       <!-- Projects -->
  40.       <a href="#" class="px-3 py-3 text-sm font-medium flex items-center text-github-text-secondary hover:text-github-text whitespace-nowrap">
  41.         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  42.           <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
  43.         </svg>
  44.         Projects
  45.       </a>
  47.       <!-- Wiki -->
  48.       <a href="#" class="px-3 py-3 text-sm font-medium flex items-center text-github-text-secondary hover:text-github-text whitespace-nowrap">
  49.         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  50.           <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
  51.         </svg>
  52.         Wiki
  53.       </a>
  55.       <!-- Security -->
  56.       <a href="#" class="px-3 py-3 text-sm font-medium flex items-center text-github-text-secondary hover:text-github-text whitespace-nowrap">
  57.         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  58.           <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
  59.         </svg>
  60.         Security
  61.       </a>
  63.       <!-- Insights -->
  64.       <a href="#" class="px-3 py-3 text-sm font-medium flex items-center text-github-text-secondary hover:text-github-text whitespace-nowrap">
  65.         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  66.           <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
  67.         </svg>
  68.         Insights
  69.       </a>
  70.     </nav>
  71.   </div>
  72. </div>

第5步：实现主要内容区域结构

现在我们创建主要内容区域的两栏布局结构：

  1. <!-- 主要内容区域 -->
  2. <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
  3.   <div class="flex flex-col lg:flex-row">
  4.     <!-- 主内容区 -->
  5.     <div class="lg:w-3/4 lg:pr-8">
  6.       <!-- 主内容将在这里添加 -->
  7.     </div>
  9.     <!-- 右侧边栏 -->
  10.     <div class="lg:w-1/4 mt-6 lg:mt-0">
  11.       <!-- 边栏内容将在这里添加 -->
  12.     </div>
  13.   </div>
  14. </main>

第6步：实现分支选择器与路径导航

在主内容区内添加分支选择器和路径导航：

  1. <!-- 分支选择器与路径导航 -->
  2. <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 pb-3 border-b border-github-border">
  3.   <!-- 分支选择器 -->
  4.   <div class="flex flex-wrap items-center space-x-2">
  5.     <!-- 分支选择按钮 -->
  6.     <button class="flex items-center text-sm bg-github-bg border border-github-border rounded-md px-3 py-1 hover:bg-gray-100">
  7.       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  8.         <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
  9.       </svg>
  10.       main
  11.       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ml-1">
  12.         <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
  13.       </svg>
  14.     </button>
  16.     <!-- 分支数量 -->
  17.     <button class="flex items-center text-sm text-github-text-secondary hover:text-github-blue">
  18.       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  19.         <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
  20.       </svg>
  21.       <span>14 branches</span>
  22.     </button>
  24.     <!-- 标签数量 -->
  25.     <button class="flex items-center text-sm text-github-text-secondary hover:text-github-blue">
  26.       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  27.         <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
  28.         <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
  29.       </svg>
  30.       <span>8 tags</span>
  31.     </button>
  32.   </div>
  33. <!-- 搜索/Go to file/Code按钮组 -->
  34. <div class="flex flex-wrap items-center mt-3 sm:mt-0 space-x-2">
  35.   <!-- Go to file -->
  36.   <button class="flex items-center text-sm bg-github-bg border border-github-border rounded-md px-3 py-1 hover:bg-gray-100">
  37.     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  38.       <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 17.25-3-3m0 0-3 3m3-3v7.5M12 6.75a4.5 4.5 0 0 1 0-9 4.5 4.5 0 0 1 0 9ZM12 12.75h.008v.008H12v-.008Z" />
  39.     </svg>
  40.     Go to file
  41.   </button>
  43.   <!-- Code按钮 -->
  44.   <button class="flex items-center text-sm bg-github-bg border border-github-border rounded-md px-3 py-1 hover:bg-gray-100">
  45.     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  46.       <path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
  47.     </svg>
  48.     Code
  49.     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ml-1">
  50.       <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
  51.     </svg>
  52.   </button>
  53. </div>

第7步：实现文件浏览列表

文件浏览列表展示仓库中的文件和目录：

  1. <!-- 文件浏览列表 -->
  2. <div class="rounded-md border border-github-border overflow-hidden mb-6">
  3.   <!-- 表头 -->
  4.   <div class="bg-github-bg border-b border-github-border px-4 py-2 flex items-center text-github-text-secondary">
  5.     <div class="flex-1 text-xs font-medium">
  6.       <span>14 files</span>
  7.     </div>
  8.     <div class="flex space-x-2 text-xs">
  9.       <button class="hover:text-github-blue">Name</button>
  10.       <button class="hover:text-github-blue">Last commit</button>
  11.       <button class="hover:text-github-blue">Commit message</button>
  12.       <button class="hover:text-github-blue">Age</button>
  13.       <button class="hover:text-github-blue">Contributors</button>
  14.     </div>
  15.   </div>
  17.   <!-- 文件列表 -->
  18.   <div class="divide-y divide-github-border">
  19.     <!-- 文件项 - 目录 -->
  20.     <div class="hover:bg-github-bg">
  21.       <a href="#" class="px-4 py-2 flex items-center">
  22.         <div class="flex-1">
  23.           <div class="flex items-center">
  24.             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-github-blue">
  25.               <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" />
  26.             </svg>
  27.             <span class="ml-2 text-github-blue">docs</span>
  28.           </div>
  29.         </div>
  30.         <div class="hidden md:flex text-sm text-github-text-secondary flex-1">Update documentation</div>
  31.         <div class="hidden lg:block text-sm text-github-text-secondary">3 days ago</div>
  32.       </a>
  33.     </div>
  35.     <!-- 文件项 - 文件 -->
  36.     <div class="hover:bg-github-bg">
  37.       <a href="#" class="px-4 py-2 flex items-center">
  38.         <div class="flex-1">
  39.           <div class="flex items-center">
  40.             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-github-text-secondary">
  41.               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
  42.             </svg>
  43.             <span class="ml-2">README.md</span>
  44.           </div>
  45.         </div>
  46.         <div class="hidden md:flex text-sm text-github-text-secondary flex-1">Update README with new features</div>
  47.         <div class="hidden lg:block text-sm text-github-text-secondary">1 week ago</div>
  48.       </a>
  49.     </div>
  51.     <!-- 文件项 - 配置文件 -->
  52.     <div class="hover:bg-github-bg">
  53.       <a href="#" class="px-4 py-2 flex items-center">
  54.         <div class="flex-1">
  55.           <div class="flex items-center">
  56.             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-github-text-secondary">
  57.               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
  58.             </svg>
  59.             <span class="ml-2">package.json</span>
  60.           </div>
  61.         </div>
  62.         <div class="hidden md:flex text-sm text-github-text-secondary flex-1">Bump dependencies versions</div>
  63.         <div class="hidden lg:block text-sm text-github-text-secondary">2 weeks ago</div>
  64.       </a>
  65.     </div>
  67.     <!-- 文件项 - 源代码 -->
  68.     <div class="hover:bg-github-bg">
  69.       <a href="#" class="px-4 py-2 flex items-center">
  70.         <div class="flex-1">
  71.           <div class="flex items-center">
  72.             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-github-text-secondary">
  73.               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
  74.             </svg>
  75.             <span class="ml-2">index.js</span>
  76.           </div>
  77.         </div>
  78.         <div class="hidden md:flex text-sm text-github-text-secondary flex-1">Fix bug in API handler</div>
  79.         <div class="hidden lg:block text-sm text-github-text-secondary">3 weeks ago</div>
  80.       </a>
  81.     </div>
  82.   </div>
  83. </div>

第8步：实现README预览区域

README预览区域展示仓库的自述文件内容：

  1. <!-- README预览 -->
  2. <div class="border border-github-border rounded-md overflow-hidden">
  3.   <!-- README标题栏 -->
  4.   <div class="bg-github-bg border-b border-github-border px-4 py-2 flex justify-between items-center">
  5.     <div class="flex items-center">
  6.       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-github-text-secondary">
  7.         <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
  8.       </svg>
  9.       <span class="ml-2 font-medium">README.md</span>
  10.     </div>
  11.     <div>
  12.       <button class="text-github-text-secondary hover:text-github-text">
  13.         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
  14.           <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
  15.         </svg>
  16.       </button>
  17.     </div>
  18.   </div>
  20.   <!-- README内容 -->
  21.   <div class="px-6 py-4 prose max-w-none">
  22.     <h1>Project Title</h1>
  23.     <p>A brief description of what this project does and who it's for.</p>
  25.     <h2>Features</h2>
  26.     <ul>
  27.       <li>Feature 1</li>
  28.       <li>Feature 2</li>
  29.       <li>Feature 3</li>
  30.     </ul>
  32.     <h2>Installation</h2>
  33.     <p>Install dependencies with npm:</p>
  34.     <pre class="bg-gray-100 p-2 rounded-md"><code>npm install</code></pre>
  36.     <h2>Usage</h2>
  37.     <pre class="bg-gray-100 p-2 rounded-md"><code>npm start</code></pre>
  38.     <p>Example of using the project.</p>
  40.     <h2>Contributing</h2>
  41.     <p>Contributions are always welcome!</p>
  43.     <h2>License</h2>
  44.     <p>MIT</p>
  45.   </div>
  46. </div>

第9步：实现右侧边栏

右侧边栏包含仓库的概览信息、发布版本和贡献者信息：

  1. <!-- 右侧边栏 -->
  2. <div class="lg:w-1/4 mt-6 lg:mt-0">
  3.   <!-- About部分 -->
  4.   <div class="border border-github-border rounded-md overflow-hidden mb-4">
  5.     <div class="bg-github-bg border-b border-github-border px-4 py-2">
  6.       <h3 class="font-medium">About</h3>
  7.     </div>
  8.     <div class="p-4">
  9.       <p class="text-sm mb-4">A brief description of what this project does and who it's for.</p>
  11.       <!-- 仓库信息列表 -->
  12.       <div class="text-sm space-y-3">
  13.         <!-- 主题 -->
  14.         <div class="flex items-start">
  15.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mt-0.5 text-github-text-secondary mr-2">
  16.             <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
  17.           </svg>
  18.           <span>Topics: <a href="#" class="text-github-blue hover:underline">javascript</a>, <a href="#" class="text-github-blue hover:underline">web</a>, <a href="#" class="text-github-blue hover:underline">react</a></span>
  19.         </div>
  21.         <!-- 网站链接 -->
  22.         <div class="flex items-start">
  23.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mt-0.5 text-github-text-secondary mr-2">
  24.             <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
  25.           </svg>
  26.           <a href="#" class="text-github-blue hover:underline">projectwebsite.com</a>
  27.         </div>
  29.         <!-- 许可证 -->
  30.         <div class="flex items-start">
  31.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mt-0.5 text-github-text-secondary mr-2">
  32.             <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
  33.           </svg>
  34.           <a href="#" class="text-github-blue hover:underline">MIT License</a>
  35.         </div>
  37.         <!-- Stars -->
  38.         <div class="flex items-start">
  39.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mt-0.5 text-github-text-secondary mr-2">
  40.             <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
  41.           </svg>
  42.           <span>4.2k stars</span>
  43.         </div>
  45.         <!-- Watching -->
  46.         <div class="flex items-start">
  47.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mt-0.5 text-github-text-secondary mr-2">
  48.             <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
  49.             <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
  50.           </svg>
  51.           <span>198 watching</span>
  52.         </div>
  54.         <!-- Forks -->
  55.         <div class="flex items-start">
  56.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mt-0.5 text-github-text-secondary mr-2">
  57.             <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
  58.           </svg>
  59.           <span>238 forks</span>
  60.         </div>
  61.       </div>
  62.     </div>
  63.   </div>
  65.   <!-- Releases部分 -->
  66.   <div class="border border-github-border rounded-md overflow-hidden mb-4">
  67.     <div class="bg-github-bg border-b border-github-border px-4 py-2 flex justify-between items-center">
  68.       <h3 class="font-medium">Releases</h3>
  69.       <a href="#" class="text-xs text-github-blue hover:underline">View all</a>
  70.     </div>
  71.     <div class="p-4">
  72.       <div class="flex items-center mb-2">
  73.         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-github-green mr-2">
  74.           <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
  75.           <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
  76.         </svg>
  77.         <a href="#" class="text-sm font-medium text-github-blue hover:underline">v1.0.0</a>
  78.       </div>
  79.       <p class="text-xs text-github-text-secondary mb-3">Latest release · 2 weeks ago</p>
  80.       <a href="#" class="text-xs text-github-blue hover:underline">+ 5 releases</a>
  81.     </div>
  82.   </div>
  84.   <!-- Contributors部分 -->
  85.   <div class="border border-github-border rounded-md overflow-hidden">
  86.     <div class="bg-github-bg border-b border-github-border px-4 py-2 flex justify-between items-center">
  87.       <h3 class="font-medium">Contributors</h3>
  88.       <a href="#" class="text-xs text-github-blue hover:underline">View all</a>
  89.     </div>
  90.     <div class="p-4">
  91.       <div class="flex flex-wrap gap-2 mb-2">
  92.         <a href="#" class="block">
  93.           <img src="https://github.com/identicons/user1.png" alt="Contributor" class="w-8 h-8 rounded-full">
  94.         </a>
  95.         <a href="#" class="block">
  96.           <img src="https://github.com/identicons/user2.png" alt="Contributor" class="w-8 h-8 rounded-full">
  97.         </a>
  98.         <a href="#" class="block">
  99.           <img src="https://github.com/identicons/user3.png" alt="Contributor" class="w-8 h-8 rounded-full">
  100.         </a>
  101.         <a href="#" class="block">
  102.           <img src="https://github.com/identicons/user4.png" alt="Contributor" class="w-8 h-8 rounded-full">
  103.         </a>
  104.         <a href="#" class="block">
  105.           <img src="https://github.com/identicons/user5.png" alt="Contributor" class="w-8 h-8 rounded-full">
  106.         </a>
  107.       </div>
  108.       <p class="text-xs text-github-text-secondary">+ 12 contributors</p>
  109.     </div>
  110.   </div>
  111. </div>

关键样式技术点解析

1. 两栏布局实现

GitHub仓库详情页采用了经典的两栏布局，主内容区在左，信息边栏在右。在Tailwind中，我们使用以下类实现：

  1. <div class="flex flex-col lg:flex-row">
  2.   <!-- 主内容区 -->
  3.   <div class="lg:w-3/4 lg:pr-8">
  4.     <!-- 内容 -->
  5.   </div>
  7.   <!-- 右侧边栏 -->
  8.   <div class="lg:w-1/4 mt-6 lg:mt-0">
  9.     <!-- 内容 -->
  10.   </div>
  11. </div>

这里使用了：

  • flex flex-col lg:flex-row: 在移动端使用垂直布局，在大屏幕(lg:1024px以上)使用水平布局
  • lg:w-3/4和lg:w-1/4: 在大屏幕上分配宽度比例为3:1
  • mt-6 lg:mt-0: 在移动端添加上边距，在大屏幕移除（因为水平排列后不需要）

2. 文件浏览列表样式

GitHub的文件列表采用了很有特色的样式，包括悬停高亮、图标区分和响应式布局：

  1. <div class="divide-y divide-github-border">
  2.   <div class="hover:bg-github-bg">
  3.     <a href="#" class="px-4 py-2 flex items-center">
  4.       <!-- 内容 -->
  5.     </a>
  6.   </div>
  7. </div>

关键样式类：

  • divide-y divide-github-border: 使用边框分隔每一项，这是Tailwind的便捷工具
  • hover:bg-github-bg: 鼠标悬停时改变背景色
  • hidden md:flex: 在中等屏幕以上才显示提交信息列
  • hidden lg:block: 在大屏幕才显示时间列

3. 按钮和标签样式

GitHub使用统一的按钮风格，我们使用以下类来实现：

  1. <button class="flex items-center text-sm bg-github-bg border border-github-border rounded-md px-3 py-1 hover:bg-gray-100">
  2.   <svg class="w-4 h-4 mr-1">...</svg>
  3.   文本
  4. </button>

特点包括：

  • 浅灰背景 (bg-github-bg)
  • 轻微的边框 (border border-github-border)
  • 适中的圆角 (rounded-md)
  • 图标+文本的组合 (flex items-center)
  • 轻微的悬停效果 (hover:bg-gray-100)

4. 徽章和计数器样式

GitHub经常使用小型徽章显示计数，我们这样实现：

  1. <span class="ml-1 rounded-full bg-gray-200 px-2 text-xs">42</span>

这些小徽章具有圆角、浅色背景和紧凑的内边距，非常适合显示小数字。

5. 标签和图标系统

GitHub大量使用图标来提高界面的可识别性。我们使用了Heroicons作为图标库：

  1. <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
  2.   <!-- 路径 -->
  3. </svg>

关键样式：

  • 标准大小 (w-4 h-4 或 w-5 h-5)
  • 使用当前文本颜色 (stroke="currentColor")
  • 适当的间距 (mr-1 或 ml-2)

6. 响应式导航设计

GitHub的导航菜单在不同屏幕尺寸上都能良好工作：

  1. <nav class="flex overflow-x-auto">
  2.   <a href="#" class="px-3 py-3 text-sm font-semibold border-b-2 border-github-blue flex items-center">
  3.     <!-- 内容 -->
  4.   </a>
  5.   <!-- 更多链接 -->
  6. </nav>

这里使用：

  • flex overflow-x-auto: 允许菜单在小屏幕上水平滚动
  • whitespace-nowrap: 确保菜单项不会换行
  • border-b-2 border-github-blue: 使用底部边框标记当前活动项

常见问题与解决方案

  1. 问题: 移动端布局堆叠问题
    解决方案: 使用 flex-col 在小屏幕将两栏布局改为垂直堆叠，并添加合适的间距。

  2. 问题: 文件浏览区域在小屏幕上信息过多
    解决方案: 使用 hidden md:flex 隐藏次要信息，只保留文件名，确保移动体验良好。

  3. 问题: GitHub图标无法精确匹配
    解决方案: 使用Heroicons作为基础，对于特殊图标可以从GitHub获取SVG路径或使用最相似的替代图标。

  4. 问题: README区域的Markdown排版
    解决方案: 使用自定义的prose插件配置，针对GitHub的Markdown风格进行调整。

  5. 问题: 顶部导航栏在移动端显示不全
    解决方案: 使用响应式设计，在小屏幕上简化显示的元素，保留最核心功能。

扩展与练习建议

练习1：添加分支切换下拉菜单

尝试实现点击分支选择按钮时显示的下拉菜单，包括搜索框和最近分支列表。

练习2：实现Code按钮的克隆URL弹出面板

实现点击Code按钮后弹出的包含HTTPS/SSH克隆URL和下载ZIP选项的面板。

练习3：添加文件操作按钮

在文件浏览列表的表头区域添加”Add file”和”Code”等操作按钮，包含下拉菜单功能。

练习4：实现搜索过滤功能

为文件列表添加简单的JavaScript功能，实现按文件名过滤的功能。

练习5：完善移动端适配

进一步优化移动端的显示效果，特别是文件列表和README内容的展示方式。

总结

在本节中，我们成功实现了GitHub仓库详情页的核心界面元素。通过Tailwind CSS的工具类，我们能够快速构建复杂的布局并精确匹配GitHub的设计语言。关键点包括：

  1. 使用两栏响应式布局展示主内容和边栏信息
  2. 实现文件浏览列表，包括图标、排序和悬停效果
  3. 创建符合GitHub风格的按钮、标签和统计指示器
  4. 使用适当的图标增强界面的可用性
  5. 确保界面在不同设备上都有良好的体验

通过这些实现，你可以看到Tailwind CSS如何帮助我们高效地构建复杂的界面，而无需编写大量自定义CSS。这种工作流使得快速原型设计和实现精确的设计变得更加容易。

在下一节中，我们将深入探讨代码查看页面，包括如何实现语法高亮和行号显示功能。