使用 Next.js 15.1.3 + Tailwind css构建现代前端项目
使用 Next.js 15.1.3 (Turbopack) 构建现代前端项目
本指南将带你完整地使用 Next.js 15.1.3 及 Turbopack 构建一个 现代前端项目，并集成 Tailwind CSS 进行样式开发。
1. 环境准备
1.1 安装 Node.js
确保你的设备上已经安装 Node.js 版本 18 及以上（建议 20+）。
-
检查 Node.js 版本：
node -v
若版本低于 18，请升级 Node.js
### **1.2 选择包管理器**
Next.js 支持 `npm`、`yarn` 和 `pnpm`，本文使用 `npm`，但你可以替换为 `yarn` 或 `pnpm`。
------
## **2. 创建 Next.js 15.1.3 项目**
在终端中运行以下命令创建 Next.js 项目：
```bash
npx create-next-app@15.1.3 my-next-app
安装过程中会提示一些选项：
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use experimental `app/` directory with React Server Components? … No / Yes
-
建议选择：
- TypeScript：建议 Yes，增强类型安全性
- ESLint：建议 Yes，确保代码质量
- Tailwind CSS：选择 Yes（如果不选，后面手动安装）
src/目录：随意app/目录：Yes，使用 App Router（推荐）
进入项目目录：
cd my-next-app
3. 启动开发服务器
npm run dev
如果一切正常，你会看到：
> my-next-app@0.1.0 dev
> next dev --turbopack
▲ Next.js 15.1.3 (Turbopack)
- Local: http://localhost:3000
在浏览器访问 http://localhost:3000，确保 Next.js 运行正常。
4. 配置 Tailwind CSS
4.1 编辑 tailwind.config.js
打开 tailwind.config.js，修改 content 字段，确保 Tailwind 能作用于所有组件：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
4.2 在 globals.css 中导入 Tailwind
找到 app/globals.css 或 styles/globals.css，确保文件中有：
@tailwind base;
@tailwind components;
@tailwind utilities;
5. 确保全局 CSS 正确导入
如果 globals.css 未被加载，需要在 app/layout.tsx 中手动导入：
// app/layout.tsx
import './globals.css';
export const metadata = {
title: 'My Next.js App',
description: 'Generated by create-next-app',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
6. 测试 Tailwind CSS
6.1 修改 app/page.tsx
确保 Tailwind 样式生效，编辑 app/page.tsx：
export default function Home() {
return (
<main className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
<h1 className="text-4xl font-bold text-blue-500">
Tailwind CSS 引用成功！
</h1>
<p className="mt-4 text-lg text-gray-700">
如果你看到这段文字有颜色，说明 Tailwind CSS 已经生效。
</p>
</main>
);
}
6.2 重新运行服务器
npm run dev
在浏览器访问 http://localhost:3000，如果文字变蓝，说明 Tailwind 已成功生效！
7. 生产环境构建
当项目开发完成后，可以使用以下命令构建生产环境：
npm run build
然后运行：
npm start
这将在 localhost:3000 以生产模式运行。
8 Tailwind CSS 无法生效**
-
检查
tailwind.config.js是否配置了content，确保app目录被正确包含。 -
检查
globals.css是否正确导入。 -
尝试清理缓存：
rm -rf .next node_modules package-lock.json npm install npm run dev
总结
通过以上步骤，你已经成功：
✅ 创建 Next.js 15.1.3 项目
✅ 配置 Tailwind CSS
✅ 运行 开发环境并测试 Tailwind
✅ 构建 生产环境并准备部署
