如何在 Next.js 應用程式中安裝 Tailwind CSS

Tailwind CSS 是一個優先使用工具類的 CSS 框架，與 Next.js 完全相容。本指南將帶您了解如何在 Next.js 應用程式中安裝 Tailwind CSS。

安裝 Tailwind

安裝必要的 Tailwind CSS 套件：

終端機

npm install -D tailwindcss @tailwindcss/postcss postcss

小提示：如果您使用 create-next-app CLI 建立專案，Next.js 會詢問您是否要安裝 Tailwind 並自動配置專案。

配置 Tailwind

在專案根目錄建立 postcss.config.mjs 檔案，並將 @tailwindcss/postcss 插件添加到您的 PostCSS 配置中：

postcss.config.mjs

/** @type {import('tailwindcss').Config} */
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

從 Tailwind v4 開始，預設不需要任何配置。如果您確實需要配置 Tailwind，可以參考官方文件來配置全域 CSS 檔案。

如果您有現有的 Tailwind v3 專案，還有升級 CLI 和指南可供參考。

導入樣式

將 Tailwind CSS 指令添加到您的全域樣式表中，Tailwind 將使用這些指令來注入生成的樣式，例如：

app/globals.css

@import 'tailwindcss';

在根佈局 (app/layout.tsx) 中，導入 globals.css 樣式表以將樣式應用到應用程式中的每個路由。

import type { Metadata } from 'next'

// 這些樣式將應用到應用程式中的每個路由
import './globals.css'

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// 這些樣式將應用到應用程式中的每個路由
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 CSS 並添加全域樣式後，您可以在應用程式中使用 Tailwind 的工具類。

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

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

與 Turbopack 一起使用

從 Next.js 13.1 開始，Tailwind CSS 和 PostCSS 已支援 Turbopack。