Next.js 和 Tailwind CSS 2025 指南：设置、提示和最佳实践

简介：在 2025 年将 Tailwind 与 Next.js 结合使用

到 2025 年， Tailwind CSS 和 Next.js 将继续引领现代 Web 开发。Tailwind 的实用程序优先方法使样式设置快速一致，而 Next（凭借其 App Router 和 React 服务器组件）则为构建可扩展的高性能应用程序提供了强大的工具。

本指南专为希望使用此堆栈构建干净、响应迅速的 UI 的初级到中级开发人员量身定制。从设置和布局样式到深色模式、性能提示和项目结构，您将学习在下一个项目中自信地将 Tailwind 与 NextJs 一起使用所需的一切。

在 Next.js 项目中设置 Tailwind CSS

在深入研究将 Tailwind CSS 与 Next 结合使用的高级技术之前，让我们首先快速设置一个与 Tailwind 无缝集成的现代 Next.js 项目。

第 1 步：创建 Next.js 应用程序

首先初始化新的 Next 应用程序。我们将使用官方的 Next.js CLI 来简化设置。在终端中运行以下命令：

npx create-next-app@latest my-next-app --typescript --eslint --app
cd my-next-app

在这里，我们选择了 TypeScript （），选择代码质量的 ESLint （）和 Next 13+ 中引入的 App Router （）。 --typescript --eslint --app

第 2 步：安装 Tailwind CSS

Tailwind CSS（现在为版本 4）以最少的依赖项简化了安装。在项目的根目录中运行以下命令：

npm install tailwindcss @tailwindcss/postcss postcss

这个命令可以安装将 Tailwind 集成到 Next 项目中所需的一切。

第 3 步：配置 Tailwind 和 PostCSS

接下来，生成默认的 Tailwind 配置：

npx tailwindcss init

这将创建一个文件。将其配置为扫描项目文件中的 Tailwind 类： tailwind.config.js

// tailwind.config.js
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

然后在根目录下创建一个文件，以确保 Tailwind 正确编译： postcss.config.mjs

// postcss.config.mjs
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

第 4 步：包括 Tailwind 样式

创建一个全局 CSS 文件（通常位于）并导入 Tailwind CSS： app/globals.css

/* app/globals.css */
@import "tailwindcss";

最后，将此全局样式表包含在根布局组件（）中： app/layout.tsx

// app/layout.tsx
import "./globals.css";

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

第 5 步：验证设置

让我们快速验证一下设置。修改你的主页（）以使用 Tailwind 类： app/page.tsx

// app/page.tsx
export default function Page() {
  return (
    <div className="flex h-screen items-center justify-center bg-gray-100">
      <h1 className="text-3xl font-bold text-blue-600">Hello, Tailwind with Nextjs!</h1>
    </div>
  );
}

现在，运行开发服务器：

npm run dev

访问 http://localhost:3000 。您应该会看到一个居中的标题，该标题的样式与 Tailwind 的实用程序类相得益彰。

关键要点：

Tailwind v4 简化了与 Next 的集成，需要的配置步骤更少。
始终确保扫描 Tailwind 类的正确目录。 tailwind.config.js
全局 CSS 导入可确保整个应用程序的样式一致。 layout.tsx

有了这个坚实的基础，我们现在准备好探索 Tailwind 如何与 Next App Router 和 React 服务器组件集成。

Next.js App Router 和 Server 组件中的 Tailwind CSS

随着 Tailwind CSS 成功集成到你的 Next 项目中，让我们探索一下它如何自然地补充 Next.js 的 App Router 架构及其在最近更新中引入的强大 React 服务器组件 。

了解 Next.js 中的 App Router

到 2025 年，Next.js 将 App Router 作为其主要路由系统。与传统的 Pages Router 不同，App Router 鼓励开发人员默认使用服务器组件围绕嵌套布局模型构建应用程序。

这种架构的主要好处是由于更多的服务器端渲染（SSR）和简化的数据获取而获得更好的性能。Tailwind CSS 非常适合这里，因为它直接通过类名应用样式，使样式可预测、模块化和高效。

使用 Tailwind 设置 React 服务器组件的样式

React 服务器组件（RSC）在服务器上呈现并以静态 HTML 形式交付。由于 Tailwind 通过静态类名而不是动态 JavaScript 交互来应用样式，因此它与服务器组件完全兼容。

以下是该过程的直观细分：

Next.js App Router 渲染流程（图表建议）：

User Request
    ↓
Next.js Server → Server Components (JSX + Tailwind classes)
    ↓
Tailwind CSS compiled at build-time (only used classes included)
    ↓
Optimized HTML + Single CSS bundle sent to client
    ↓
Browser caches CSS; Fast subsequent page loads

实际示例：使用 Tailwind 的服务器组件

让我们创建一个简单而实用的服务器渲染组件，并使用 Tailwind 设置样式。

在您的项目中，在以下位置添加新组件： components/UserCard.tsx

// components/UserCard.tsx
export default function UserCard({ name, role }: { name: string; role: string }) {
  return (
    <div className="rounded-lg border p-4 shadow-sm">
      <h2 className="text-lg font-semibold text-gray-800">{name}</h2>
      <p className="text-sm text-gray-500">{role}</p>
    </div>
  );
}

现在，在主页（）中使用此服务器组件： app/page.tsx

// app/page.tsx
import UserCard from "@/components/UserCard";

export default function Page() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-4">
      <UserCard name="Alex Johnson" role="Frontend Developer" />
    </div>
  );
}

由于此组件默认是服务器渲染的（无指令），因此 Next.js 会在服务器上预渲染样式化的 HTML，从而提供快速响应的体验，而不会在客户端上产生任何 JavaScript 开销。 "use client"

为什么 Tailwind 与服务器组件配合得如此之好：

静态样式 ：Tailwind 的实用程序优先类在构建时生成样式，从而产生极其高效和可预测的 CSS。
无运行时成本 ：由于类是在编译时解析的，因此服务器组件不会因样式设置而产生额外的 JavaScript 成本。
一致性和缓存 ：通过在应用程序之间共享单个优化的 CSS 捆绑包，用户可以体验到快速的加载时间和跨路由的一致样式。

关键要点：

Tailwind 无缝集成到 Next 的 App Router 和 React Server 组件中，增强了性能和开发人员体验。
将 Tailwind 与服务器组件结合使用有助于保持清晰度和性能，从而消除不必要的 JavaScript 样式开销。
Tailwind 的方法与 Next 的服务器端渲染策略自然而然地保持一致，提供开箱即用的最佳性能。

接下来，我们将探索使用 TypeScript 在 Next 项目中使用 Tailwind CSS 时的最佳实践，为您提供实际示例和开发技巧。

在 Next 中将 Tailwind 与 TypeScript 集成（简单的方法！

现在您已经习惯了在 Next 项目中使用 Tailwind，让我们探索如何顺利地将其与 TypeScript 结合使用。将 TypeScript 与 Tailwind 结合使用不仅可以为您提供更好的工具和更少的错误，还可以简化您的前端工作流程。让我们以对话的方式逐步完成此过程。

为什么选择 TypeScript 和 Tailwind？

如果你和 2025 年的大多数开发人员一样，你可能已经在使用 TypeScript 来确保它的安全性和清晰度。但它如何与 Tailwind 相配呢？

好消息： Tailwind CSS 和 TypeScript 是天作之合。 Tailwind 不需要针对 TypeScript 进行任何特殊配置，但仍有一些有用的提示可以充分利用这个强大的组合。

让您的编辑器为您提供帮助

首先，在编辑器中启用 Tailwind IntelliSense（尤其是在使用 VS Code 时）。这个小扩展会在您键入时自动建议 Tailwind 类名。它可以立即捕获拼写错误，让您免于以后因缺少样式而感到沮丧。

想象一下，键入并立即看到您的所有颜色选项。这就像有一个友好的助手就在你身边。 bg-

干净的条件类（没有混乱）

我们通常需要基于用户交互或数据的动态或条件样式。这是在 TypeScript 中使用 Tailwind 处理这些情况的一种简单易读的方法：

import clsx from "clsx";

function Notification({ success, message }: { success: boolean; message: string }) {
  return (
    <div
      className={clsx(
        "rounded p-4 text-sm",
        success ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"
      )}
    >
      {message}
    </div>
  );
}

这种方法使您的代码一目了然，无需再进行杂乱的字符串连接！

轻松覆盖 Tailwind 类

有时你可能想要调整可重用组件的特定实例的样式。与其纠结于冲突的 Tailwind 类，不如尝试使用一个名为。以下是它在实际组件中的工作原理： tailwind-merge

import { twMerge } from "tailwind-merge";

function Button({ className, children }: { className?: string; children: React.ReactNode }) {
  return (
    <button className={twMerge("rounded bg-blue-600 px-4 py-2 text-white", className)}>
      {children}
    </button>
  );
}

此设置允许您将其他类传递给组件，而无需担心样式冲突。很简单，对吧？

保持简单（和人类友好）

您可能会想将 CSS 分成多个文件来组织内容。但 Tailwind 的美妙之处（也是开发人员喜欢它的一个关键原因）是样式与组件相邻。使样式与 JSX 保持一致有助于保持清晰性并加快调试速度。

下面是一个简单的示例：

<div className="rounded-lg p-6 shadow-md">
  <h2 className="mb-2 text-xl font-semibold">Inline and Clear!</h2>
  <p className="text-gray-600">Everything you need, all in one place.</p>
</div>

您的 JSX 清楚地传达了 UI 的外观，而无需搜索多个 CSS 文件。

应避免的内容：动态类陷阱

Tailwind 在构建时分析您的代码。这意味着非常动态的类生成（如）将不起作用，因为 Tailwind 不会检测到它。相反，请明确列出可能的类： bg-${color}-500

// 🚫 Problematic:
<div className={\`bg-${color}-500\`} />

// ✅ Better approach:
<div className={clsx(color === "red" && "bg-red-500", color === "blue" && "bg-blue-500")} />

同时使用 Tailwind 和 TypeScript 并不一定很复杂。只需使样式靠近 JSX，利用方便的帮助程序（如和），然后让编辑器的 IntelliSense 指导您。有了这些提示，您的开发体验将感觉流畅自然。 clsx tailwind-merge

现在，让我们解决另一个令人兴奋的话题： 在 Next.js 中使用 Tailwind 实现深色模式 。

使用 Tailwind 将暗模式添加到您的 Next.js 应用程序

深色模式不再只是锦上添花，而是用户所期望的。使用 Tailwind CSS，在 Next 项目中实现它非常简单。

让我们来看看如何在 2025 年以 现代方式 启用暗模式，使用 Tailwind 的内置实用程序和一些 React 魔法来切换主题。

第 1 步：决定您希望深色模式如何工作

Tailwind 支持两种深色模式策略：

基于媒体 （默认）：遵循用户的系统设置（深色或浅色）。
基于类 ：您可以通过向父元素添加类来手动切换深色模式（通常为）。 dark <html>

我们将使用 基于类 的方法，因为它为我们提供了完全的控制权，并且与 Next 配合得很好。

第 2 步：为基于类的深色模式配置 Tailwind

在中，启用基于类的深色模式： tailwind.config.js

// tailwind.config.js
module.exports = {
  darkMode: "class",
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

这会告诉 Tailwind 仅在父元素上存在类时应用样式。 dark:dark

第 3 步：创建主题切换

为了让用户在明暗模式之间切换，我们将使用 React 构建一个简单的切换。

首先，创建一个 client 组件：

// components/ThemeToggle.tsx
"use client";

import { useEffect, useState } from "react";

export default function ThemeToggle() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    const root = window.document.documentElement;
    const stored = localStorage.getItem("theme");

    if (stored === "dark") {
      root.classList.add("dark");
      setIsDark(true);
    } else {
      root.classList.remove("dark");
    }
  }, []);

  const toggleTheme = () => {
    const root = window.document.documentElement;
    const isDarkMode = root.classList.contains("dark");

    if (isDarkMode) {
      root.classList.remove("dark");
      localStorage.setItem("theme", "light");
      setIsDark(false);
    } else {
      root.classList.add("dark");
      localStorage.setItem("theme", "dark");
      setIsDark(true);
    }
  };

  return (
    <button
      onClick={toggleTheme}
      className="rounded bg-gray-200 px-4 py-2 text-sm dark:bg-gray-800 dark:text-white"
    >
      {isDark ? "☀️ Light Mode" : "🌙 Dark Mode"}
    </button>
  );
}

此按钮用于切换标记上的类，并将用户的首选项存储在中。 dark <html> localStorage

第 4 步：在组件中使用深色模式样式

启用后，您可以在 Tailwind 类中使用变体来相应地设置应用程序的样式： dark:

<div className="min-h-screen bg-white text-black dark:bg-gray-900 dark:text-white">
  <h1 className="text-3xl font-bold">Welcome to Dark Mode</h1>
</div>

Tailwind 将自动生成必要的 CSS，并且您的 UI 将在主题切换时立即响应。

（可选）第 5 步：在每个页面上显示切换

要使深色模式在所有位置都可用，请将组件放在您的导航栏或永久导航栏中。 ThemeToggle layout.tsx

// app/layout.tsx
import "./globals.css";
import ThemeToggle from "@/components/ThemeToggle";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="transition-colors duration-300">
        <ThemeToggle />
        {children}
      </body>
    </html>
  );
}

这增加了平滑过渡，并使主题之间的切换成为一种完美的体验。

关键要点

Tailwind 使变体的深色模式样式变得容易。 dark:
使用基于类的深色模式可以为您提供完全控制权并与 Next.js 无缝协作。
保留用户的主题可确保在会话之间保持一致的体验。 localStorage

🚀 Optimizing Tailwind in Next.js for Production

Tailwind CSS is fast out of the box, but here are a few quick tips to make sure your Next.js app stays lean and snappy in production:

✅ Use Tailwind’s JIT Compiler

Tailwind includes only the classes you use. Just ensure your has accurate paths:tailwind.config.js content

content: [
  "./app/**/*.{ts,tsx}",
  "./components/**/*.{ts,tsx}",
]

⚠️ Avoid Dynamic Class Names

Don’t do this:

<div className={\`bg-${color}-500\`} />

Instead, use or hardcoded conditionals so Tailwind can detect them.clsx

🧠 Stick to One Shared CSS File

Next.js handles one CSS bundle best—no need to split styles by route. It’s faster due to caching and fewer network requests.

🎯 Optimize Fonts & Images

Use and for better performance—pairs well with Tailwind’s utility classes.next/font next/image

🧱 Structuring Tailwind for a Scalable Codebase

As your Next.js project grows, so will your styles. Tailwind keeps things maintainable, but a little structure goes a long way. Here’s how to keep your styling clean and scalable:

📁 1. Organize Your Components

Group related UI pieces under folders like:

components/
├── ui/
│   └── Button.tsx
├── layout/
│   └── Navbar.tsx

Keep utility classes inside the JSX unless they become repetitive.

🪄 2. Use for Reusable Styles@apply

Got the same set of classes everywhere? Abstract them in your global CSS:

/* app/globals.css */
.btn {
  @apply px-4 py-2 rounded font-medium bg-blue-600 text-white hover:bg-blue-700;
}

然后像这样使用它：

<button className="btn">Click me</button>

非常适合用于按钮、卡片、徽章等。

🎨 3. 自定义主题

在中，定义您自己的调色板、间距或字体： tailwind.config.js

theme: {
  extend: {
    colors: {
      brand: "#1e40af",
    },
  },
}

使用语义类名称 like 在整个应用程序中保持一致。 bg-brand

🏁 结论

在 2025 年将 Tailwind CSS 与 Next.js 结合使用，可为您提供现代、高效且可扩展的前端工作流程。只需最少的设置，您就可以利用实用程序优先的样式、强大的 App Router 以及服务器组件和深色模式等功能，同时保持代码库的整洁和可维护性。

无论您是刚刚起步还是扩展生产应用程序，此堆栈都使您能够在不牺牲结构或性能的情况下快速行动。

想要更进一步？探索官方文档以获得更深入的见解：

简介：在 2025 年将 Tailwind 与 Next.js 结合使用

在 Next.js 项目中设置 Tailwind CSS

第 1 步：创建 Next.js 应用程序

第 2 步：安装 Tailwind CSS

第 3 步：配置 Tailwind 和 PostCSS

第 4 步：包括 Tailwind 样式

第 5 步：验证设置

关键要点：

Next.js App Router 和 Server 组件中的 Tailwind CSS

了解 Next.js 中的 App Router

使用 Tailwind 设置 React 服务器组件的样式

实际示例：使用 Tailwind 的服务器组件

为什么 Tailwind 与服务器组件配合得如此之好：

关键要点：

在 Next 中将 Tailwind 与 TypeScript 集成（简单的方法！

为什么选择 TypeScript 和 Tailwind？

让您的编辑器为您提供帮助

干净的条件类（没有混乱）

轻松覆盖 Tailwind 类

保持简单（和人类友好）

应避免的内容：动态类陷阱

使用 Tailwind 将暗模式添加到您的 Next.js 应用程序

第 1 步：决定您希望深色模式如何工作

第 2 步：为基于类的深色模式配置 Tailwind

第 3 步：创建主题切换

第 4 步：在组件中使用深色模式样式

（可选）第 5 步：在每个页面上显示切换

关键要点

🚀 Optimizing Tailwind in Next.js for Production

✅ Use Tailwind’s JIT Compiler

⚠️ Avoid Dynamic Class Names

🧠 Stick to One Shared CSS File

🎯 Optimize Fonts & Images

🧱 Structuring Tailwind for a Scalable Codebase

📁 1. Organize Your Components

🪄 2. Use for Reusable Styles@apply

🎨 3. 自定义主题

🏁 结论

发送评论 编辑评论

发送评论编辑评论