河童小生

在第一章中，我们运行了服务，打开网页之后，你会发现页面只有单纯的文字，没有很漂亮的样式；在第二章，我们会学习如何为 Next.js 应用程序添加样式的不同方法。无CSS样式的主页

全局样式 Global Styles

在 /app/ui 文件夹下，我们会看到一个 global.css 的文件，我们可以使用这个文件为应用程序中的所有路由添加 CSS 规则——比如 CSS 重置规则、全局 HTML 元素样式（如链接）等等。

如果想在应用程序中添加全局样式，需要前往/app/layout.tsx文件，并导入 global.css 文件：

[!code] /app/layout.tsx

import '@/app/ui/global.css';  // ✅新增导入

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

保存编辑之后，刷新网页，即可看到更新后的页面：导入样式后的页面

TailWind CSS

Tailwind是一个 CSS 框架，可以通过直接在 React 代码中快速编写实用类来加快开发过程。

[!code]+ /app/ui/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

虽然 CSS 样式是全局共享的，但每个类只会单独应用于每个元素。这意味着如果添加或删除一个元素，就不需要担心维护单独的样式表、样式冲突，或者随着应用规模的扩大，CSS 包的大小也会增长。

在这个 /app/page.tsx文件中，会发现我们在示例中使用了 Tailwind 类。

[!code] /app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';

export default function Page() {
 return (
   // These are Tailwind classes:
   \<main className="flex min-h-screen flex-col p-6">
     \<div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
   // ...
 )
}

如果之前没有了解过TailWind也不用担心，为了节省时间，当前项目已经预设好了所有要用到的组件样式。

让我们一起玩转 Tailwind！复制下面的代码，并将其粘贴在 <p> 元素上方的 /app/page.tsx 中：

<div
  className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"
/>

刷新页面，你会发现多了个黑色小三角▲ 新的页面-小三角

CSS模块

CSS Modules 可以通过自动创建唯一的类名将 CSS 限定在组件中，因此你不需要担心样式冲突。

在 /app/ui 中创建一个名为 home.module.css 的新文件，并添加以下 CSS 规则：

[!code] /app/ui/home.module.css

.shape {
 height: 0;
 width: 0;
 border-bottom: 30px solid black;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
}

然后，在 /app/page.tsx 文件中导入样式，并用 styles.shape 中的类名替换 <div> 中添加的 Tailwind 类名

 import AcmeLogo from '@/app/ui/acme-logo';
 import { ArrowRightIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
+import styles from '@/app/ui/home.module.css';
 
 export default function Page() {
   return (
     <main className="flex min-h-screen flex-col p-6">
-      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
+      <div className={styles.shape} />
     // ...
  )
}

Tailwind 和 CSS 模块是 Next.js 应用中最常见的两种样式方法。你使用哪种或两者兼用完全取决于个人偏好。

对比总结与建议

特性	Tailwind CSS	CSS Modules
核心哲学	功能优先，在 HTML 中组合样式	样式与结构分离，CSS 局部化
开发速度	非常快，尤其适合原型设计	较慢，需要切换文件和编写 CSS
JSX 可读性	较低，类名冗长	非常高，结构清晰
样式作用域	全局（但通过工具类组合实现）	默认局部作用域，无冲突
一致性	非常高，基于统一的设计规范	依赖开发者自觉和规范
学习曲线	需要学习工具类（中等）	几乎为零（如果你会 CSS）

`clsx` 库

实际开发中，可能需要根据状态或其他条件有条件地样式化一个元素。例如当数字大于80时显示绿色，小于60时变为红色；clsx是一个库，可以让您轻松切换类名。我们建议查看文档以获取更多细节，但基本用法如下：

假设你想创建一个 InvoiceStatus 组件，该组件接受 status 。状态可以是 'pending' 或 'paid' 。
如果它是 'paid' 就显示绿色。如果它是 'pending' 就变为灰色。

[!code] /app/ui/invoices/status.tsx

import clsx from 'clsx';

export default function InvoiceStatus({ status }: { status: string }) {
 return (
   \<span
     className={clsx(
       'inline-flex items-center rounded-full px-2 py-1 text-sm',
       {
+          'bg-gray-100 text-gray-500': status === 'pending',
+          'bg-green-500 text-white': status === 'paid',
       },
     )}
   >
   // ...
)}

其他方式

除了我们已经讨论的方法，还可以使用以下方式为 Next.js 应用程序进行样式设计：

导入自定义的.css和.scss样式文件；
CSS-in-JS 库，例如： styled-jsx, styled-components, and emotion.
查看 CSS documentation以获取更多信息。

CSS样式