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.config.js 中，新增會使用 Tailwind CSS 類別名稱的檔案路徑：
/** @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 將使用這些指令來注入其生成的樣式，例如：
@tailwind base;
@tailwind components;
@tailwind utilities;在 自訂 App 檔案 (pages/_app.js) 中，匯入 globals.css 樣式表以將樣式套用至應用程式中的每個路由。
// 這些樣式會套用至應用程式中的每個路由
import '@/styles/globals.css'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}// 這些樣式會套用至應用程式中的每個路由
import '@/styles/globals.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}使用類別
安裝 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。