在 Next.js 中安装并配置 Tailwind CSS

Tailwind CSS 和 Next.js 通常被结合使用，以构建快速且现代化的 Web 应用程序。

• Tailwind CSS 使用“实用工具优先（Utility-first）”的类名来快速构建 UI 样式。
• Next.js 通过服务端渲染（SSR）来提供更好的性能和 SEO 优化。

在安装 Tailwind CSS 之前，请确保你已经安装了 node 和 npm。

Step 1: 创建一个新的 Next.js 项目

让我们使用下面的命令来创建一个新的 Next.js 应用程序。

npx create-next-app my-app

Step 2: 安装 Tailwind CSS

创建完 Next.js 项目后，请进入项目的根目录，并使用以下命令安装 Tailwind CSS 及其相关依赖项。

npm install -D tailwindcss postcss autoprefixer

Step 3: 创建 Tailwind 配置文件

运行以下命令来生成 Tailwind 的配置文件，该文件可用于扩展 Tailwind 的功能。

npx tailwindcss init -p

上述命令将在你的项目中创建两个配置文件。

./tailwind.config.js


CODEBLOCK_ab348842


./postcss.config.js


CODEBLOCK_eeb33da2

项目结构： 以下是安装 Tailwind CSS 后的项目结构。

!image

• .next/ : 由 Next.js 生成的构建输出。
• node_modules/ : 已安装的项目依赖。
• pages/ : 处理路由的文件（如 _app.js, index.js 等）。
• public/ : 静态资源，如图片和图标（favicon.ico）。
• styles/ : 全局样式和 CSS 模块（globals.css, Home.module.css）。
• tailwind.config.js : Tailwind CSS 的配置文件。
• postcss.config.js : 用于处理 Tailwind 的 PostCSS 配置。
• next.config.js : Next.js 的配置设置。
• package.json / package-lock.json : 项目元数据和依赖。
• README.md : 项目说明文档。

Step 4: 配置模板路径

在 tailwind.config.js 文件中，添加以下配置内容。

/** @type {import(‘tailwindcss‘).Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

此配置仅针对 pages 和 components 目录，你也可以在此处配置自定义的文件夹路径。

Step 5: 添加 Tailwind 指令

在 /styles/globals.css 文件中，添加 Tailwind CSS 的层级指令。

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

Step 6: 测试 Tailwind CSS

在 /pages/index.js 文件中，我们先清理所有样板代码，然后测试一些来自 Tailwind CSS 的实用工具类。

/pages/index.js


CODEBLOCK_c4508e21


使用以下命令运行我们的 Next.js 应用程序。

npm run dev

输出效果:

!output