CSS¶

原文地址：https://nextjs.org/docs/app/getting-started/css

Next.js 提供了多种使用 CSS 设计应用程序样式的方法，包括：

Tailwind CSS
CSS 模块
全局 CSS
外部样式表
Sass
在 JS 中使用 CSS

1. Tailwind CSS¶

Tailwind CSS 是一个实用程序优先的 CSS 框架，它提供低级实用程序类来构建自定义设计。

pnpm

pnpm add -D tailwindcss @tailwindcss/postcss

将 PostCSS 插件添加到 postcss.config.mjs 文件中：

postcss.config.mjs
1 2 3 4 5	`export default { plugins: { '@tailwindcss/postcss': {}, }, }`

在全局 CSS 文件中导入 Tailwind：

app/globals.css
@import 'tailwindcss';

在根布局中导入 CSS 文件：

app/layout.tsx
import './globals.css'

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

现在您可以开始在应用程序中使用 Tailwind 的实用程序类：

app/page.tsx
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 设置说明。

2. CSS 模块¶

CSS 模块通过生成唯一的类名来本地化 CSS。这允许您在不同的文件中使用相同的类，而不必担心命名冲突。

要开始使用 CSS 模块，请创建一个扩展名为 .module.css 的新文件，并将其导入到 app 目录内的任何组件中：

app/page.module.css
.blog {
  padding: 24px;
}

app/blog/page.tsx
import styles from './blog.module.css'

export default function Page() {
  return <main className={styles.blog}></main>
}

3. 全局 CSS¶

您可以使用全局 CSS 在整个应用程序中应用样式。

创建一个 app/global.css 文件并将其导入根布局中，以将样式应用到应用程序中的每个路由：

app/global.css
body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

app/layout.tsx
// 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。

4. 外部样式表¶

外部包发布的样式表可以导入 app 目录中的任何位置，包括共置组件：

app/layout.tsx
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 中，也可以使用。有关更多信息，请参阅 React link文档。

5. 合并和排序¶

Next.js 通过自动分块（合并）样式表来在生产构建期间优化 CSS，而 CSS 的顺序取决于您在代码中导入样式的顺序。

例如， base-button.module.css 将在 page.module.css之前排序，因为 <BaseButton> 在 page.module.css 之前导入：

app/page.tsx
import { BaseButton } from './base-button'
import styles from './page.module.css'

export default function Page() {
  return <BaseButton className={styles.primary} />
}

app/base-button.tsx
import styles from './base-button.module.css'

export function BaseButton() {
  return <button className={styles.primary} />
}

建议

尝试将 CSS 导入包含到单个 JavaScript 或 TypeScript 条目文件中
在应用程序的根目录中导入全局样式和 Tailwind 样式表。
使用 Tailwind CSS 满足大多数样式需求，因为它涵盖了实用程序类的常见设计模式。
当 Tailwind 实用程序不够时，使用 CSS 模块来实现特定于组件的样式。
为 CSS 模块使用一致的命名约定。例如，使用<name>.module.css而不是<name>.tsx 。
将共享样式提取到共享组件中以避免重复导入。
关闭自动排序导入的 linter 或格式化程序，例如 ESLint 的sort-imports 。
您可以使用next.config.js中的cssChunking选项来控制 CSS 的分块方式。

6. 开发 VS. 生产¶

在开发中（ next dev ），CSS 更新会通过快速刷新立即应用。
在生产（ next build ）中，所有 CSS 文件都会自动连接成许多缩小的和代码分割的.css文件，确保为路由加载最少量的 CSS。
CSS 仍然在生产中禁用 JavaScript 的情况下加载，但在开发中需要 JavaScript 才能实现快速刷新。
CSS 顺序在开发中的表现可能有所不同，请始终确保检查构建（ next build ）以验证最终的 CSS 顺序。