如何在你的应用中使用 CSS
Next.js 提供了几种使用 CSS 为应用添加样式的方式，包括：
Tailwind 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';在你的 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>
)
}值得注意的是： 如果你需要对非常旧的浏览器提供更广泛的支持，请参阅 Tailwind CSS v3 设置说明。
CSS Modules
CSS Modules 通过生成唯一的类名来局部作用域化 CSS。这使你可以在不同文件中使用相同的类名而不用担心命名冲突。
要开始使用 CSS Modules，创建一个扩展名为 .module.css 的新文件，并将其导入到 pages 目录内的任何组件中：
.blog {
padding: 24px;
}import styles from './blog.module.css'
export default function Page() {
return <main className={styles.blog}></main>
}Global CSS
你可以使用全局 CSS 在整个应用中应用样式。
在 pages/_app.js 文件中导入样式表，以将样式应用到应用中的每个路由：
import '@/styles/global.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}由于样式表的全局性质，为了避免冲突，你应该在 pages/_app.js 中导入它们。
External stylesheets
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>
)
}Ordering and Merging
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} />
}Recommendations
为了保持 CSS 顺序的可预测性：
- 尝试将 CSS 导入限制在单个 JavaScript 或 TypeScript 入口文件中
- 在应用的根部导入全局样式和 Tailwind 样式表。
- 使用 Tailwind CSS 满足大多数样式需求，因为它通过实用类涵盖了常见的设计模式。
- 当 Tailwind 实用类不足时，使用 CSS Modules 处理组件特定的样式。
- 为你的 CSS 模块使用一致的命名约定。例如，使用
<name>.module.css而不是<name>.tsx。 - 将共享样式提取到共享组件中以避免重复导入。
- 关闭自动排序导入的 linter 或格式化工具，如 ESLint 的
sort-imports。 - 你可以在
next.config.js中使用cssChunking选项来控制 CSS 的分块方式。
Development vs Production
- 在开发模式（
next dev）中，CSS 更新通过 Fast Refresh 即时应用。 - 在生产模式（
next build）中，所有 CSS 文件会自动连接成多个经过压缩和代码分割的.css文件，确保为路由加载最少量的 CSS。 - 在生产环境中，即使禁用 JavaScript，CSS 仍会加载，但在开发环境中需要 JavaScript 才能实现 Fast Refresh。
- CSS 顺序在开发环境中的表现可能有所不同，始终确保检查构建（
next build）以验证最终的 CSS 顺序。