CSS

Next.js 提供了多種使用 CSS 為應用程式設定樣式的方法，包括：

Tailwind CSS
CSS 模組
全域性 CSS
外部樣式表
Sass
CSS-in-JS

Tailwind CSS

Tailwind CSS 是一個實用優先的 CSS 框架，它提供了低級別的實用類來構建自定義設計。

安裝 Tailwind CSS

pnpm add -D tailwindcss @tailwindcss/postcss

將 PostCSS 外掛新增到您的 postcss.config.mjs 檔案中

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

在您的全域性 CSS 檔案中匯入 Tailwind

@import 'tailwindcss';

在您的根佈局中匯入 CSS 檔案

import './globals.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

現在您可以在應用程式中開始使用 Tailwind 的實用類了

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-4xl font-bold">Welcome to Next.js!</h1>
    </main>
  )
}

須知： 如果您需要更廣泛的舊版瀏覽器支援，請參閱 Tailwind CSS v3 設定說明。

CSS 模組

CSS 模組透過生成唯一的類名來區域性作用 CSS。這允許您在不同的檔案中使用相同的類，而無需擔心命名衝突。

要開始使用 CSS 模組，請建立一個副檔名為 .module.css 的新檔案，並將其匯入到 `app` 目錄中的任何元件中

.blog {
  padding: 24px;
}

import styles from './blog.module.css'
 
export default function Page() {
  return <main className={styles.blog}></main>
}

全域性 CSS

您可以使用全域性 CSS 在整個應用程式中應用樣式。

建立一個 app/global.css 檔案，並在根佈局中匯入它，將樣式應用於應用程式中的所有路由

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

// These styles apply to every route in the application
import './global.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

須知： 全域性樣式可以匯入到 `app` 目錄中的任何佈局、頁面或元件中。然而，由於 Next.js 使用 React 內建的樣式表支援與 Suspense 整合，這目前不會在您導航路由時移除樣式表，這可能導致衝突。我們建議將全域性樣式用於真正的全域性 CSS（如 Tailwind 的基礎樣式），將 Tailwind CSS 用於元件樣式，並在需要時將 CSS 模組用於自定義作用域 CSS。

外部樣式表

外部包釋出的樣式表可以匯入到 `app` 目錄的任何位置，包括協同定位的元件

import 'bootstrap/dist/css/bootstrap.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

須知： 在 React 19 中，也可以使用 <link rel="stylesheet" href="..." />。有關更多資訊，請參閱 React link 文件。

排序和合並

Next.js 在生產構建期間透過自動分塊（合併）樣式表來最佳化 CSS。CSS 的順序取決於您在程式碼中匯入樣式的順序。

例如，base-button.module.css 將在 page.module.css 之前排序，因為 <BaseButton> 在 page.module.css 之前匯入

import { BaseButton } from './base-button'
import styles from './page.module.css'
 
export default function Page() {
  return <BaseButton className={styles.primary} />
}

import styles from './base-button.module.css'
 
export function BaseButton() {
  return <button className={styles.primary} />
}

建議

為了保持 CSS 順序可預測

嘗試將 CSS 匯入限制在單個 JavaScript 或 TypeScript 入口檔案。
在應用程式的根目錄中匯入全域性樣式和 Tailwind 樣式表。
使用 Tailwind CSS 來滿足大多數樣式需求，因為它涵蓋了常用的設計模式和實用類。
當 Tailwind 實用程式不足時，使用 CSS 模組來設定元件特定的樣式。
為您的 CSS 模組使用一致的命名約定。例如，使用 <name>.module.css 而不是 <name>.tsx。
將共享樣式提取到共享元件中，以避免重複匯入。
關閉自動排序匯入的 linter 或格式化工具，例如 ESLint 的 sort-imports。
您可以在 next.config.js 中使用 cssChunking 選項來控制 CSS 的分塊方式。

開發與生產

在開發模式（next dev）下，CSS 更新會透過快速重新整理即時生效。
在生產模式（next build）下，所有 CSS 檔案都會自動連線成許多經過壓縮和程式碼分割的 .css 檔案，確保為路由載入最小量的 CSS。
在生產環境中，即使停用 JavaScript，CSS 也會載入，但在開發環境中，快速重新整理需要 JavaScript。
CSS 排序在開發環境中可能表現不同，請始終檢查構建（next build）以驗證最終的 CSS 順序。

下一步

瞭解更多關於在您的應用程式中使用 CSS 的替代方法。

CSS

Tailwind CSS

CSS 模組

全域性 CSS

外部樣式表

排序和合並

建議

開發與生產

下一步

Tailwind CSS v3

Sass

CSS-in-JS