How to use CSS in your application
Next.js 提供了多种在应用程序中使用 CSS 的方式，包括：
CSS Modules
CSS Modules 通过生成唯一的类名来局部作用域化 CSS。这允许你在不同文件中使用相同的类名而不用担心命名冲突。
要开始使用 CSS Modules，创建一个扩展名为 .module.css 的新文件，并将其导入 app 目录中的任何组件：
app/blog/styles.module.css
.blog {
padding: 24px;
}app/blog/page.tsx
TypeScript
import styles from './styles.module.css'
export default function Page({ children }: { children: React.ReactNode }) {
return <main className={styles.blog}>{children}</main>
}全局 CSS
你可以使用全局 CSS 在整个应用程序中应用样式。
要使用全局样式，创建一个 app/global.css 文件并在根布局中导入它，以将样式应用于应用程序中的每个路由：
app/global.css
body {
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}app/layout.tsx
TypeScript
// 这些样式适用于应用程序中的每个路由
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 使用全局样式，对特定范围的 CSS 使用 CSS Modules。
Tailwind CSS
Tailwind CSS 是一个实用优先的 CSS 框架，可与 Next.js 无缝集成。
安装 Tailwind
要开始使用 Tailwind，安装必要的 Tailwind CSS 包：
Terminal
npm install tailwindcss @tailwindcss/postcss postcss配置 Tailwind
在项目根目录创建一个 postcss.config.mjs 文件，并将 @tailwindcss/postcss 插件添加到你的 PostCSS 配置中：
postcss.config.mjs
/** @type {import('tailwindcss').Config} */
export default {
plugins: {
'@tailwindcss/postcss': {},
},
}使用 Tailwind
将 Tailwind 指令 添加到你的全局样式表中：
app/globals.css
@import 'tailwindcss';然后，在根布局中导入样式：
app/layout.tsx
TypeScript
import type { Metadata } from 'next'
// 这些样式适用于应用程序中的每个路由
import './globals.css'
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}你可以开始在应用程序中编写 Tailwind 的实用类。
app/page.tsx
TypeScript
export default function Page() {
return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}外部样式表
由外部包发布的样式表可以在 app 目录中的任何地方导入，包括共同定位的组件：
app/layout.tsx
TypeScript
import 'bootstrap/dist/css/bootstrap.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className="container">{children}</body>
</html>
)
}外部样式表必须直接从 npm 包导入或下载并与你的代码库共同定位。你不能使用 <link rel="stylesheet" />。