使用 React 和 Tailwind CSS 製作響應式標題的終極指南

使用 React 和 Tailwind CSS 建立響應式標題

建立響應式標頭是現代 Web 開發的基本面向。在本文中，我們將引導您使用 React 和 Tailwind CSS 建立響應式標頭元件。本指南是為初學者設計的，因此即使您是這些技術的新手，您也會發現它很容易遵循。我們將逐步分解提供的程式碼，解釋其工作原理以及如何在專案中實現類似的功能。

介紹

標題充當網站的導航區域，提供不同部分的連結以及登入或註冊等重要操作。在當今行動優先的世界中，標題具有響應能力至關重要，這意味著它們可以優雅地適應不同的螢幕尺寸。我們將使用 React 來建立我們的元件，並使用 Tailwind CSS 來設計它的樣式，確保我們擁有時尚、現代的外觀。

入門

在我們深入程式碼之前，請確保您已經設定了 React 環境。您可以透過執行以下命令使用 Create React App 建立新的 React 應用程式：

npx create-react-app responsive-header
cd responsive-header

應用程式設定完成後，您需要安裝 Tailwind CSS。您可以按照官方的 Tailwind CSS 安裝指南來完成此操作。

設定 Tailwind 後，您就可以開始建造我們的標頭組件了！

代碼的逐步分解

導入所需的庫

在 src 資料夾中，建立一個名為 Header.js 的新檔案。第一步是導入 React 和 useState 鉤子：

import React, { useState } from "react";

useState 鉤子允許我們管理導航選單的狀態，特別是它是開啟還是關閉。

建立標題組件

現在，讓我們定義我們的 Header 元件。

function Header() {
  const [nav, setNav] = useState(false);
}

在這裡，我們初始化一個名為 nav 的狀態變數來追蹤導航選單是開啟還是關閉。 setNav 函數將允許我們切換此狀態。

渲染標題

接下來，我們將回傳標頭的 JSX：

return (
  <header>
    <nav className="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800 shadow">
      <div className="flex flex-wrap justify-between items-center mx-auto max-w-screen-lg"></div>
</header>

• element：它包裝了我們的導航鏈接，並使用 Tailwind CSS 類別進行樣式設定。我們設定背景顏色、填滿和陰影來創造乾淨的外觀。
• ;具有 Flex 屬性：這使用 Flexbox 來佈局導覽內的項目。 max-w-screen-lg 類別限制標題的最大寬度，確保它在更大的螢幕上看起來不錯。

  添加徽標

  現在，讓我們在標題中加入一個標誌：
  

  <a href="#" className="flex items-center">
    <span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">
      Logo
    </span>
  </a>
  

  此部分包含連結到主頁的錨標記，以及徽標文字的 span 元素。套用的類別可確保標誌的樣式正確，包括深色模式的響應式設計元素。

  新增導航選單

  接下來，我們將新增實際的導航項目。此部分將根據導航狀態是 true 還是 false 進行變更：
  

  <div
    className={`flex-col md:flex md:flex-row items-center w-full md:w-auto md:order-2 transition-all duration-300 ${
      nav
        ? "absolute top-14 left-0 w-full bg-white shadow-md p-4 md:relative md:top-0 md:w-auto md:bg-transparent md:shadow-none"
        : "hidden md:flex gap-6"
    }`}
  ></div>
  

  • 動態類別名稱：我們使用範本文字根據導航狀態有條件地應用類別。當nav為true時，選單可見；否則，它會隱藏在中型和更大的螢幕上。
  • Transition：transition-all和duration-300類別在選單開啟或關閉時提供平滑的過渡效果。

  建立選單項

  現在，讓我們在無序列表中定義選單項目：
  

  <ul className="flex flex-col md:flex-row md:gap-8 gap-0">
    <li>
      <a
        href="#"
        className="block py-2 pr-4 pl-3 text-gray-700 rounded md:bg-transparent md:text-primary-700 md:p-0 dark:text-white"
        aria-current="page"
      >
        Home
      </a>
    </li>
    <li>
      <a
        href="#"
        className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
      >
        Pricing
      </a>
    </li>
    <li>
      <a
        href="#"
        className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
      >
        Contact Us
      </a>
    </li>
    <li>
      <a
        href="#"
        className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
      >
        Sign In
      </a>
    </li>
  </ul>
  

  每個清單項目 (

• ) 都包含一個用作連結的錨標記 ()。 Tailwind CSS 類別在這裡廣泛用於樣式設計，包括懸停效果和深色模式相容性。

  新增註冊按鈕

  選單項目之後，我們將新增一個註冊按鈕：
  

  <button
    className="mt-4 md:mt-0 rounded-full bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
    type="button"
  >
    Sign Up Now
  </button>
  

  此按鈕的設計風格引人注目，並為使用者提供了明確的號召性用語。我們新增了懸停和焦點狀態以獲得更好的使用者體驗。

  為行動裝置添加漢堡圖標

  為了讓標題具有響應能力，我們將為行動用戶添加一個漢堡選單圖示：
  

  <div className="md:hidden flex items-center lg:order-1">
    <button
      type="button"
      className="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
      aria-controls="mobile-menu"
      aria-expanded={nav}
      onClick={() => setNav(!nav)}
    >
      <span className="sr-only">Open main menu</span>
  </button>
  </div>
  

  此程式碼建立一個按鈕，點擊該按鈕會切換導覽選單的可見性。 aria-controls 和 aria-expanded 屬性增強了可訪問性。

  處理圖示更改

  根據導航選單是開啟還是關閉，我們可以顯示不同的圖示：
  

  {nav ? (
    <svg /* close icon */></svg>
  ) : (
    <svg /* open icon */></svg>
  )}
  

  這種條件渲染使我們能夠向使用者提供有關選單狀態的視覺提示。

  Complete Component Code

  Now that we've gone through each part, here’s the complete code for the Header component:
  

  import React, { useState } from "react";
  
  function Header() {
    const [nav, setNav] = useState(false);
  
    return (
      
  
        
  
          
  
            
              
                Logo
              
            
  
            
  
              
  
                
  
                  
                    Home
                  
                
                
  
                  
                    Pricing
                  
                
                
  
                  
                    Contact Us
                  
                
                
  
                  
                    Sign In
                  
                
              
              
                Sign Up Now
              
            
  
            
  
               setNav(!nav)}
              >
                Open main menu
                {nav ? (
                  
                ) : (
                  
                )}
              
            
          
        
      
    );
  }
  
  export default Header;
  

  Conclusion

  Congratulations! You have successfully built a responsive header using React and Tailwind CSS. This component features a logo, navigation links, a sign-up button, and a hamburger icon for mobile devices. With this foundation, you can customize the header further by adding more links, changing styles, or integrating it into a larger application.

  FAQs

  Q1: What is Tailwind CSS?

  Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs quickly. Unlike traditional CSS frameworks, Tailwind promotes a more component-based approach to styling.

  Q2: Why use React for the header component?

  React is a powerful JavaScript library for building user interfaces. Using React allows us to create reusable components, manage state efficiently, and improve the overall performance of our applications.

  Q3: How can I customize the header further?

  You can customize the header by adding more links, changing colors, or even adding dropdown menus. Tailwind CSS makes it easy to change styles directly in the JSX.

  Q4: Is it necessary to use Tailwind CSS with React?

  No, it’s not necessary to use Tailwind CSS with React. You can use any CSS framework or custom CSS styles. However, Tailwind provides a fast and efficient way to style components without writing custom CSS.

  By following this guide, you should now feel confident in creating responsive headers for your own projects. Happy coding!