介绍
本教程展示了如何将 Next.js 与 TailwindCSS 结合安装，为各种前端项目创建初始设置。.
Next.js 是一个基于 ReactJS 的前端框架，提供了许多实用功能。它不仅可以作为静态网站生成器，还拥有从各种数据源获取数据以显示动态内容的先进策略。.
TailwindCSS 是一个 CSS 框架，它采用函数式优先的方式来应用 CSS 类名。这是一种高效创建现代布局和设计的方法，无需担心命名规范。.
先决条件
- 系统支持 macOS、Windows 或 Linux
- 已安装最新版本的Node.js和npm。
步骤 1 – 安装 Next.js
您可以自动安装 Next.js，也可以手动安装。.
- 自动地：
npx create-next-app my-project [--use-npm]
- 手动操作：
mkdir ~/my-project && cd ~/my-project
npm install next react react-dom安装 Next.js 后，编辑新文件 ~/my-project/package.json，并添加如下所示的“script”部分：
{
"dependencies": {
<your_dependencies>
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}步骤 2 – 安装 TailwindCSS
TailwindCSS 使用 PostCSS 作为预处理器，并使用 AutoPrefix 作为附加依赖项。虽然这是可选的，但建议这样做，因为 Tailwind 在使用这些插件时会提供一些很棒的功能，例如在自定义 CSS 文件中使用 @apply、@theme 或 theme() 等非标准关键字。.
cd ~/my-project
npm install -D tailwindcss postcss autoprefixer之后，我们可以为 TailwindCSS 创建配置文件：
npx tailwindcss init -p
这将创建 tailwind.config.js 和 postcss.config.js。.
步骤 3 – 配置 Next.js
要为应用程序定义路由，我们可以简单地向应用程序目录添加额外的 JavaScript 文件。在本教程中，我们将重点介绍非动态生成的页面。这是因为在很多情况下，我们需要使用动态数据生成路由，例如，基于 ID 创建路由。您可以在 Next.js 文档中找到有关如何实现此操作的详细指南（请确保菜单设置为«使用应用程序路由»）。.
添加页面
要创建页面，您需要一个名为 app 的子目录。在 app 目录下，您需要两个文件：
| 文件 | 描述 |
|---|---|
| app/layout.tsx | 此文件包含有关布局的信息，该布局将自动应用于所有页面，包括主页和所有子页面。. |
| app/page.tsx | 这里包含主页的内容。. |
此外，您可以根据需要添加任意数量的子目录。每个子目录都包含一个 page.tsx 文件，代表应用程序的一个子页面。.
在本教程中，我们将使用以下示例：
app/
├── layout.tsx # layout of main page and all subpages
├── page.tsx # content main page
└── example-subpage/
├── layout.tsx # additional layout requirements for example-subpage
└── page.tsx # content example-subpage这个例子给出了两页内容：
http://<ip-address>:3000 # main page
http://<ip-address>:3000/example-subpage # subpage如果您是手动安装 Next.js，请创建应用程序文件目录：
mkdir ~/my-project/app
现在您可以向页面添加内容了：
- 首页
nano ~/my-project/app/page.tsx
请使用以下内容作为首页内容：
// ~/my-project/app/page.tsx
export default function Page() {
return <h1 className="text-white text-3xl font-bold pl-5">Welcome to Next.js and TailwindCSS</h1>
}- 子页面
为子页面添加一个新的子目录，并创建 page.tsx 文件：
mkdir ~/my-project/app/example-subpage
nano ~/my-project/app/example-subpage/page.tsx请使用以下内容作为子页面内容：
// ~/my-project/app/example-subpage/page.tsx
export default function Page () {
return (
<>
<div className="flex flex-col place-content-center items-center col-span-1 pr-3">
<div className="border-2 rounded-full p-0.5 border-gray-600 mb-2">
<img
className="rounded-full w-100 h-100"
src="https://picsum.photos/100/100"
alt="random image from unsplash"
/>
</div>
</div>
<div className="col-span-5 pr-3">
<h2 className="text-white text-3xl font-semibold pl-4 mb-3">Welcome to Next.js and TailwindCSS</h2>
<span className="text-gray-500 text-lg font-bold block pl-4 mb-3">Bringing both frameworks together</span>
<p className="text-white pl-4 leading-7">
Cats are believed to be the only mammals who don't taste sweetness. Cats are nearsighted, but their peripheral
vision and night vision are much better than that of humans. Cats are supposed to have 18 toes (five toes on
each front paw; four toes on each back paw). Cats can jump up to six times their length.
</p>
</div>
</>
)
}添加布局（TailwindCSS）
现在我们已经有了页面内容，接下来可以添加页面的显示布局。.
- 首页及所有子页面的总体布局
如前所述，app/layout.js 中定义的布局会自动应用于主页和所有子页面。.
选择以下两种方式之一来启用 TailwindCSS：
- 方案一：通过 JavaScript
这是添加 TailwindCSS 的一种便捷方法，无需编写任何额外的样式表。.
nano ~/my-project/app/layout.tsx
使用此内容：
// ~/my-project/app/layout.tsx
import 'tailwindcss/tailwind.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<html lang="en">
<head>
<title>Next.js and TailwindCSS</title>
<link rel="icon" href="/favicon.ico"/>
</head>
<body className="min-h-screen bg-gradient-to-tr from-midnight-100 via-midnight-200 to-midnight-300 flex flex-col justify-center">{children}</body>
</html>
</>
)
}- 方案二：通过 CSS
另一种方法是使用 CSS 添加 Tailwind 样式。为此，我们需要将全局样式表导入到 app/layout.tsx 文件中。.
创建 app/layout.tsx：
nano ~/my-project/app/layout.tsx
使用此内容：
// ~/my-project/app/layout.tsx
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<html lang="en">
<head>
<title>Next.js and TailwindCSS</title>
<link rel="icon" href="/favicon.ico"/>
</head>
<body className="min-h-screen bg-gradient-to-tr from-midnight-100 via-midnight-200 to-midnight-300 flex flex-col justify-center">{children}</body>
</html>
</>
)
}创建全局样式表 app/global.css：
/* ~/my-project/app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;遗憾的是，除了在构建时将生成的样式（基于 Tailwind 的配置）注入样式表之外，Tailwind 并没有提供对 @tailwind 指令作用的深入解释。.
- 子页面自定义布局
每个子页面都有自己的布局文件。如果您有其他布局需求，可以直接将其保存到子页面布局文件中，也可以将其保存到专用目录中，然后再导入到子页面布局文件中。将额外的布局规范保存在专用目录中，可以更方便地在多个子页面之间复用布局。因此，如果您需要在多个子页面中使用相同的布局，这种方法就非常实用。.
创建用于存放其他布局的目录：
mkdir ~/my-project/components
创建其他布局：
nano ~/my-project/components/FancyCard.js添加以下内容：
// ~/my-project/components/FancyCard.js
'use client'
import React from 'react'
const FancyCard = ({ children }) => {
return (
<div className="max-w-xl mx-auto">
<div className="p-8 bg-midnight-200 shadow-xl rounded-3xl border-4 border-gray-600">
<div className="grid grid-cols-6 gap-0 divide-x divide-gray-600">
{children}
</div>
</div>
</div>
)
}
export default FancyCard现在为您的子页面创建 layout.tsx 文件，并应用其他布局规范：
nano ~/my-project/app/example-subpage/layout.tsx
// ~/my-project/app/example-subpage/layout.tsx
import FancyCard from '../../components/FancyCard'
export default function Layout({ children }) {
return <FancyCard>{children}</FancyCard>
}如前所述，您可以根据需要向组件添加更多布局，并将其包含在每个需要使用该布局的子页面的 layout.tsx 文件中，如上所示。如果您计划只使用一次某个布局，则可以直接将其添加到该子页面的 layout.tsx 文件中。.
步骤 4 – 配置 TailwindCSS
最后一步是自定义 Tailwind 和 PostCSS 的配置文件。.
通过运行 npx tailwindcss init -p，我们已经创建了两个配置文件：
- tailwind.config.js
- postcss.config.js
如果我们想使用 PostCSS 作为预处理器，我们可以使用 postcss.config.js 来实现其他功能，例如添加供应商前缀、添加全局 CSS 重置或创建 @font-face 规则。.
TailwindCSS 的另一个强大功能是可以轻松自定义默认主题。通过修改 tailwind.config.js 中的 theme 属性，我们可以进行各种自定义设置，例如自定义断点、颜色、字体，或者更精细的属性，如间距、边框圆角或阴影。通过修改 color 键，我们可以将自定义调色板添加到现有主题中：
nano ~/my-project/tailwind.config.js
添加以下内容：
// ~/my-project/tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
colors: {
...defaultTheme.colors,
'white': '#ffffff',
'black': '#242424',
'midnight': {
'100': '#03060a',
'200': '#001a40',
'300': '#060b17',
// add more color variants if you want to
},
'gray': {
'500': '#6b7280',
'600': '#4b5563',
},
'purple': {
'500': '#6d28d9',
},
// add more colors if you want to
},
},
plugins: [],
}此外，我们扩展了默认配色方案，因此仍然可以使用 Tailwind 的默认调色板。请注意，现在我们可以使用定义的颜色及其对应的变体（bg-{color}-{variant}）将自定义颜色应用于多个应用程序类。例如：
<div className="bg-midnight-300">
...
</div>第五步——启动应用程序
现在一切准备就绪，我们可以运行程序查看结果了：
- 通过私有 IP 地址（localhost）访问：
npm run dev- 通过公网IP地址访问：
npm run dev -- -H 0.0.0.0
在网页浏览器中打开这两个页面：
http://<ip-address>:3000http
://<ip-address>:3000/example-subpage应该看起来像这样：
结果
我们成功发布了一个使用 Tailwind 作为 CSS 框架的 Next.js 应用程序。.
首次使用 CSS 框架往往会引发诸多争议，而且一如既往，并没有放之四海而皆准的准则。有人说它杂乱无章、难以阅读，有人说它与内联样式并无二致，还有人说它违反了关注点分离原则。就我个人而言，我认为这些观点都站不住脚。我推荐阅读以下两篇文章，以便了解正反两方的观点。这样，你就能判断这个框架是否适合你的下一个项目了。.
