字节笔记本字节笔记本

使用 Tailwind CSS 搭建 Next.js 项目

2024-06-06

本文介绍了如何在 Next.js 项目中集成并配置 Tailwind CSS,包括创建项目、安装 Tailwind、配置文件、导入样式以及使用类名等步骤。

使用 Tailwind CSS 搭建 Next.js 项目

Tailwind CSS 是一个非常知名的 CSS 框架,本质上是一个工具集,包含了大量的工具类,比如 flexpt-4text-centerrotate-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.jspostcss.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,享受它带来的便捷和高效。