Tailwind CSS

Tailwind CSS 是一個效用優先 (utility-first) 的 CSS 框架，與 Next.js 搭配使用效果極佳。

安裝 Tailwind

安裝 Tailwind CSS 套件並執行 init 指令來產生 tailwind.config.js 和 postcss.config.js 檔案：

終端機

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

設定 Tailwind

在 tailwind.config.js 中，新增會使用 Tailwind CSS 類別名稱的檔案路徑：

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // 請注意新增了 `app` 目錄。
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',

    // 如果使用 `src` 目錄：
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

您不需要修改 postcss.config.js。

匯入樣式

將 Tailwind CSS 指令新增到您應用程式中的全域樣式表，Tailwind 會使用這些指令來注入其產生的樣式，例如：

app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

在根佈局 (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>
  )
}

使用類別

安裝 Tailwind CSS 並新增全域樣式後，您就可以在應用程式中使用 Tailwind 的效用類別 (utility classes)。

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

與 Turbopack 搭配使用

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

安裝 Tailwind

設定 Tailwind

匯入樣式

使用類別

與 Turbopack 搭配使用

On this page