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'
const config: Config = {
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: [],
}
export default config您不需要修改 postcss.config.js。
匯入樣式 加入應用程式的全域樣式表中，Tailwind 將使用這些指令來注入其產生的樣式，例如：app/globals.css@tailwind base;
@tailwind components;
@tailwind utilities;
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>
)
}