Tailwind CSS

Tailwind CSS 是一個實用優先的 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 設定檔中，新增將使用 Tailwind 類別名稱的檔案路徑

tailwind.config.ts

import type { Config } from 'tailwindcss'
 
export default {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
 
    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

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

導入樣式

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

app/globals.css

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

在根版面配置 (app/layout.tsx) 中，導入 globals.css 樣式表，將樣式套用到應用程式中的每個路由。

app/layout.tsx

import type { Metadata } from 'next'
 
// These styles apply to every route in the application
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 的實用類別。

app/page.tsx

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 Turbopack。