使用 Tailwind CSS 搭建 Next.js 项目

28 min read

使用 Tailwind CSS 搭建 Next.js 项目

Tailwind CSS 是一个非常知名的 CSS 框架，本质上是一个工具集，包含了大量的工具类，比如 flex、pt-4、text-center、rotate-90等，可以组合使用并直接在 HTML 代码上实现任何 UI 设计。与 Next.js 搭配使用非常顺手。Next.js 官方文档也推荐使用 Tailwind CSS。

使用 create-next-app 创建项目

在使用 create-next-app 创建项目的时候，如果你在命令行中选择了使用 Tailwind CSS，则相关配置都会自动生成，可以直接使用。如果没有选择，可以按照以下步骤引入 Tailwind CSS。

安装 Tailwind CSS

在项目根目录执行以下命令：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

这会同时生成 tailwind.config.js 和 postcss.config.js 文件。

配置 Tailwind

postcss.config.js 不需要修改。在 tailwind.config.js 中添加使用 Tailwind CSS 类名的文件路径：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',

    // 嫌麻烦，你也可以直接使用 `src` 目录
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

导入样式

添加 Tailwind CSS 指令，将 Tailwind 的样式注入到全局样式中。使用方式如下：

// app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

在根布局（app/layout.js）中导入 globals.css：

// app/layout.js
import './globals.css'
 
export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

使用类名

然后你就可以在应用里使用 Tailwind 的工具类名：

// app/page.js
export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

辅助工具

在 VSCode 中使用的时候，可以安装 Tailwind CSS IntelliSense 这个插件，提供自动功能、语法校验、悬停预览等功能。Tailwind CSS 中的工具类众多，记不清的时候也可以查询这个速查表。

通过以上步骤，你就可以轻松地在 Next.js 项目中使用 Tailwind CSS，享受它带来的便捷和高效。