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