Next.js 提供了几种使用 CSS 样式化应用程序的方法，包括：
Tailwind CSS 是一个实用优先的 CSS 框架，它提供底层实用工具类来构建自定义设计。
安装 Tailwind CSS：
pnpm add -D tailwindcss @tailwindcss/postcssnpm install -D tailwindcss @tailwindcss/postcssyarn add -D tailwindcss @tailwindcss/postcssbun 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>
)
}import './globals.css'
export default function RootLayout({ children }) {
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>
)
}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：
pnpm add -D tailwindcss @tailwindcss/postcssnpm install -D tailwindcss @tailwindcss/postcssyarn add -D tailwindcss @tailwindcss/postcssbun add -D tailwindcss @tailwindcss/postcss将 PostCSS 插件添加到您的 postcss.config.mjs 文件中：
export default {
plugins: {
'@tailwindcss/postcss': {},
},
}在您的全局 CSS 文件中导入 Tailwind：
@import 'tailwindcss';在您的 pages/_app.js 文件中导入 CSS 文件：
import '@/styles/globals.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}现在您可以在应用程序中开始使用 Tailwind 的实用工具类了：
export default function Home() {
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>
)
}export default function Home() {
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 Modules 通过生成唯一的类名来局部作用域 CSS。这使您可以在不同的文件中使用相同的类，而无需担心命名冲突。
要开始使用 CSS Modules，请创建一个扩展名为 .module.css 的新文件，并将其导入到 app 目录中的任何组件中：
.blog {
padding: 24px;
}import styles from './blog.module.css'
export default function Page() {
return <main className={styles.blog}></main>
}import styles from './blog.module.css'
export default function Layout() {
return <main className={styles.blog}></main>
}要开始使用 CSS Modules，请创建一个扩展名为 .module.css 的新文件，并将其导入到 pages 目录中的任何组件中：
.blog {
padding: 24px;
}import styles from './blog.module.css'
export default function Page() {
return <main className={styles.blog}></main>
}import styles from './blog.module.css'
export default function Page() {
return <main className={styles.blog}></main>
}您可以使用全局 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>
)
}// These styles apply to every route in the application
import './global.css'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}须知： 全局样式可以导入到
app目录中的任何布局、页面或组件中。然而，由于 Next.js 使用 React 内置的样式表支持来与 Suspense 集成，目前在路由之间导航时不会移除样式表，这可能导致冲突。我们建议将全局样式用于_真正_的全局 CSS（如 Tailwind 的基础样式），Tailwind CSS 用于组件样式，以及在需要时使用 CSS Modules 用于自定义作用域 CSS。
在 pages/_app.js 文件中导入样式表，以便将样式应用于应用程序中的每个路由：
import '@/styles/global.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}由于样式表的全局性，并且为了避免冲突，您应该在 pages/_app.js 中导入它们。
由外部包发布的样式表可以导入到 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>
)
}import 'bootstrap/dist/css/bootstrap.css'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className="container">{children}</body>
</html>
)
}须知： 在 React 19 中，也可以使用
<link rel="stylesheet" href="..." />。有关更多信息，请参阅 Reactlink文档。
Next.js 允许您从 JavaScript 文件导入 CSS 文件。这是可能的，因为 Next.js 将 import 的概念扩展到 JavaScript 之外。
node_modules 导入样式自 Next.js 9.5.4 起，允许在应用程序的任何位置从 node_modules 导入 CSS 文件。
对于全局样式表，如 bootstrap 或 nprogress，您应该在 pages/_app.js 中导入文件。例如：
import 'bootstrap/dist/css/bootstrap.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}要导入第三方组件所需的 CSS，您可以在您的组件中进行。例如：
import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'
function ExampleDialog(props) {
const [showDialog, setShowDialog] = useState(false)
const open = () => setShowDialog(true)
const close = () => setShowDialog(false)
return (
<div>
<button onClick={open}>Open Dialog</button>
<Dialog isOpen={showDialog} onDismiss={close}>
<button className="close-button" onClick={close}>
<VisuallyHidden>Close</VisuallyHidden>
<span aria-hidden>×</span>
</button>
<p>Hello there. I am a dialog</p>
</Dialog>
</div>
)
}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 { 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} />
}import styles from './base-button.module.css'
export function BaseButton() {
return <button className={styles.primary} />
}为了保持 CSS 排序可预测：
<name>.module.css 而不是 <name>.tsx。sort-imports。next.config.js 中使用 cssChunking 选项来控制 CSS 的分块方式。next dev) 中，CSS 更新会通过 快速刷新 即时应用。next build) 中，所有 CSS 文件会自动合并成许多经过压缩和代码分割的 .css 文件，确保为每个路由加载最小量的 CSS。next build) 以验证最终的 CSS 顺序。