CSS 樣式設定
目前，您的主頁沒有任何樣式。讓我們看看您可以透過哪些方式為 Next.js 應用程式設定樣式。
全域樣式
如果您查看 /app/ui 資料夾，會看到一個名為 global.css 的檔案。您可以使用此檔案為應用程式中的所有路由添加 CSS 規則，例如 CSS 重置規則、適用於連結等 HTML 元素的網站全域樣式等。
您可以在應用程式的任何元件中導入 global.css，但通常建議將其添加到頂層元件中。在 Next.js 中，這是根佈局 (root layout)（稍後會詳細介紹）。
透過導航至 /app/layout.tsx 並導入 global.css 檔案，為您的應用程式添加全域樣式：
import '@/app/ui/global.css';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}在開發伺服器仍在運行的情況下，儲存變更並在瀏覽器中預覽。您的主頁現在應該看起來像這樣：
但等一下，您並沒有添加任何 CSS 規則，這些樣式是從哪裡來的？
如果您查看 global.css，會注意到一些 @tailwind 指令：
@tailwind base;
@tailwind components;
@tailwind utilities;Tailwind
Tailwind 是一個 CSS 框架，允許您直接在 React 程式碼中快速編寫效用類別 (utility classes)，從而加快開發過程。
在 Tailwind 中，您可以透過添加類別名稱來為元素設定樣式。例如，添加 "text-blue-500" 會將 <h1> 文字變為藍色：
<h1 className="text-blue-500">I'm blue!</h1>雖然 CSS 樣式是全域共享的，但每個類別都是單獨應用於每個元素。這意味著如果您添加或刪除元素，無需擔心維護單獨的樣式表、樣式衝突或隨著應用程式擴展而增長的 CSS 套件大小。
當您使用 create-next-app 開始新專案時，Next.js 會詢問您是否要使用 Tailwind。如果選擇 是，Next.js 會自動安裝必要的套件並在您的應用程式中配置 Tailwind。
如果您查看 /app/page.tsx，會看到我們在範例中使用了 Tailwind 類別。
import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
export default function Page() {
return (
// 這些是 Tailwind 類別：
<main className="flex min-h-screen flex-col p-6">
<div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
// ...
)
}如果您是第一次使用 Tailwind，不用擔心。為了節省時間，我們已經為您將使用的所有元件設定了樣式。
讓我們試試 Tailwind！複製下面的程式碼並將其貼到 /app/page.tsx 中的 <p> 元素上方：
<div
className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"
/>如果您更喜歡編寫傳統的 CSS 規則或將樣式與 JSX 分開，CSS 模組是一個很好的替代方案。
CSS 模組
CSS 模組透過自動建立唯一的類別名稱，允許您將 CSS 限定在元件範圍內，因此您也無需擔心樣式衝突。
在本課程中，我們將繼續使用 Tailwind，但讓我們花點時間看看如何使用 CSS 模組來實現與上面測驗相同的結果。
在 /app/ui 中，建立一個名為 home.module.css 的新檔案，並添加以下 CSS 規則：
.shape {
height: 0;
width: 0;
border-bottom: 30px solid black;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}然後，在您的 /app/page.tsx 檔案中導入樣式，並將您添加的 <div> 中的 Tailwind 類別名稱替換為 styles.shape：
import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import styles from '@/app/ui/home.module.css';
export default function Page() {
return (
<main className="flex min-h-screen flex-col p-6">
<div className={styles.shape} />
// ...
)
}儲存變更並在瀏覽器中預覽。您應該會看到與之前相同的形狀。
Tailwind 和 CSS 模組是設定 Next.js 應用程式樣式的兩種最常見方式。使用哪一種取決於個人偏好——您甚至可以在同一個應用程式中同時使用兩者！
使用 clsx 函式庫切換類別名稱
在某些情況下，您可能需要根據狀態或其他條件來有條件地為元素設定樣式。
clsx 是一個可以讓您輕鬆切換類別名稱的函式庫。我們建議查看文件以獲取更多詳細資訊，但以下是基本用法：
- 假設您想建立一個接受
status的InvoiceStatus元件。狀態可以是'pending'或'paid'。 - 如果是
'paid'，您希望顏色為綠色。如果是'pending'，您希望顏色為灰色。
您可以使用 clsx 來有條件地應用類別，如下所示：
import clsx from 'clsx';
export default function InvoiceStatus({ status }: { status: string }) {
return (
<span
className={clsx(
'inline-flex items-center rounded-full px-2 py-1 text-sm',
{
'bg-gray-100 text-gray-500': status === 'pending',
'bg-green-500 text-white': status === 'paid',
},
)}
>
// ...
)}其他樣式解決方案
除了我們討論的方法外，您還可以使用以下方式為 Next.js 應用程式設定樣式：
- Sass，允許您導入
.css和.scss檔案。 - CSS-in-JS 函式庫，例如 styled-jsx、styled-components 和 emotion。
請查看 CSS 文件以獲取更多資訊。