为您的 Next.js 应用添加样式
在 App Router 中使用全局 CSS、CSS Modules 和 Tailwind CSS，为 Next.js 15 应用添加样式。
为您的 Next.js 应用添加样式 是 CoddyKit 上的免费 Next.js 15 Fullstack (App Router + Server Actions) 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Next.js 15 Fullstack (App Router + Server Actions) 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Next.js 15 Fullstack (App Router + Server Actions) 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Styling Options Overview
Next.js supports several styling approaches out of the box: global CSS, scoped CSS Modules, utility-first Tailwind, and CSS-in-JS libraries.
Global Stylesheet
Global CSS is imported once in the root layout and applies to every page — ideal for resets and base typography.
import "./globals.css";
export default function RootLayout({ children }) {
return (<html lang="en"><body>{children}</body></html>);
}CSS Modules for Scope
A CSS Module (x.module.css) generates locally-scoped class names, so component styles never leak into each other.
import styles from "./button.module.css";
export default function Button() {
return <button className={styles.primary}>Click</button>;
}Inside the Module File
Inside a module you write class names normally — Next.js hashes them at build time to keep them unique.
.primary {
background: rebeccapurple;
color: white;
padding: 8px 16px;
}Tailwind CSS
Tailwind gives you utility classes you compose right in your markup. It's the most common styling choice in modern Next.js apps.
export default function Card() {
return <div className="rounded-lg bg-white p-4 shadow">Hello</div>;
}Setting Up Tailwind
To set up Tailwind, install it and add its three directives to your global stylesheet so the utility classes become available.
@tailwind base;
@tailwind components;
@tailwind utilities;Conditional Classes
Toggle classes by state for conditional styling. A helper like clsx keeps the logic clean and readable.
import clsx from "clsx";
<button className={clsx("btn", isActive && "btn-active")} />Fonts with next/font
The next/font module self-hosts fonts with zero layout shift and no extra request to a font provider — performant typography for free.
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });Server vs Client Styling
Global CSS and CSS Modules work in Server Components. Some CSS-in-JS libraries need a Client Component boundary or special setup.
Responsive Design
Tailwind's responsive prefixes like md: and lg: apply styles at breakpoints, making mobile-first layouts effortless.
<div className="text-sm md:text-base lg:text-lg">Responsive text</div>Choosing an Approach
Pick by job: CSS Modules for component isolation, Tailwind for fast utility-driven UI, and global CSS for resets and base typography.
Quick Check
What does a CSS Module give you that a global stylesheet does not?
Recap
Recap: Next.js styling spans global CSS, scoped CSS Modules, and Tailwind utilities, plus next/font for fast type and responsive breakpoints.
常见问题解答
「为您的 Next.js 应用添加样式」课时是免费的吗？
是的 — 「为您的 Next.js 应用添加样式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Next.js 15 Fullstack (App Router + Server Actions) 课程的其余内容，请升级到 CoddyKit PRO。 Next.js 15 Fullstack (App Router + Server Actions) 课程共包含 4 节课。
「为您的 Next.js 应用添加样式」这节课中我会学到什么？
在 App Router 中使用全局 CSS、CSS Modules 和 Tailwind CSS，为 Next.js 15 应用添加样式。 你通过在浏览器中直接运行的动手代码来练习 Next.js 15 Fullstack (App Router + Server Actions)，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Next.js 15 Fullstack (App Router + Server Actions) 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Next.js 15 Fullstack (App Router + Server Actions) 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「为您的 Next.js 应用添加样式」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Next.js 15 Fullstack (App Router + Server Actions) 课中编写并运行代码吗？
能。每节 Next.js 15 Fullstack (App Router + Server Actions) 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。