樣式設計技巧
以下是一些可能有幫助的樣式設計技巧。
您可以單純閱讀以下章節，無需對我們的應用程式進行任何修改！
使用 clsx 函式庫切換類別
clsx 是一個簡單的函式庫，可讓您輕鬆切換類別名稱。您可以使用 npm install clsx 或 yarn add clsx 安裝它。
請參考其文件以獲取更多詳細資訊，以下是基本用法：
- 假設您想建立一個
Alert元件，它接受type參數，可以是'success'或'error'。 - 如果是
'success'，您希望文字顏色為綠色；如果是'error'，則希望文字顏色為紅色。
您可以先編寫一個 CSS 模組（例如 alert.module.css），如下所示：
.success {
color: green;
}
.error {
color: red;
}然後像這樣使用 clsx：
import styles from './alert.module.css';
import { clsx } from 'clsx';
export default function Alert({ children, type }) {
return (
<div
className={clsx({
[styles.success]: type === 'success',
[styles.error]: type === 'error',
})}
>
{children}
</div>
);
}自訂 PostCSS 配置
Next.js 預設使用 PostCSS 來編譯 CSS，無需任何配置。
若要自訂 PostCSS 配置，您可以建立一個名為 postcss.config.js 的頂層檔案。這在使用 Tailwind CSS 等函式庫時特別有用。
以下是新增 Tailwind CSS 的步驟。首先，安裝套件：
npm install -D tailwindcss autoprefixer postcss然後，建立 postcss.config.js：
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};我們還建議透過在 tailwind.config.js 中指定 content 選項來配置內容來源：
// tailwind.config.js
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
// 為了獲得最佳效能並避免誤判，
// 請盡可能具體地配置您的內容來源。
],
};若要深入了解如何自訂 PostCSS 配置，請查閱 PostCSS 文件。
若要輕鬆開始使用 Tailwind CSS，請參考我們的範例。
使用 Sass
Next.js 預設支援導入 Sass，包括 .scss 和 .sass 副檔名。您可以透過 CSS 模組 使用元件層級的 Sass，副檔名為 .module.scss 或 .module.sass。
在使用 Next.js 內建的 Sass 支援之前，請確保安裝 sass：
npm install -D sass本課程到此結束！
若要深入了解 Next.js 的內建 CSS 支援和 CSS 模組，請查閱 CSS 文件。