NextJS 如何安裝 TailwindCSS

哥們兒們今天咱們來談談如何在 NextJS 中使用 TailwindCSS 這個超級好用的 CSS 框架!如果你對網頁排版的樣式設計很頭痛，那麼 TailwindCSS 就是你的救星啦!別緊張，跟著小編我一步一步做就對啦

安裝相關套件

首先，我們要透過 npm 安裝 tailwindcss、postcss 和 autoprefixer 這三個基本的套件。打開你的終端機，在專案根目錄下執行:

npm install tailwindcss postcss autoprefixer

這一步就像是準備好了廚房的主要食材，等一下就可以開始大展身手啦!

初始化設定檔

接下來，我們要讓 Tailwind 建立起基本的設定檔，這樣它才知道該如何運作。在終端機執行:

npx tailwindcss init -p

這個指令就像是把食材洗淨切好，準備好開始下廚的步驟。它會幫你產生兩個設定檔: tailwind.config.js 和 postcss.config.js。

設定 Tailwind 專案路徑

現在我們需要到 tailwind.config.js 這個檔案中，告訴 Tailwind 我們專案中所有需要使用它的檔案路徑。打開這個檔案，修改 content 這個參數，像這樣:

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './myproject/**/*.{js,ts,jsx,tsx}', // 加入你專案的目錄路徑
  ],
  // 其餘設定...
}

把 './myproject/**/*.{js,ts,jsx,tsx}' 這一行加進去，別忘了將 myproject 換成你自己專案的目錄名稱喔!這就像是告訴廚師，哪些菜餚需要使用這些食材一樣。

加入 Tailwind 指令

最後一步，我們需要在 CSS 檔案中加入一些特別的指令，讓 Tailwind 知道該如何處理樣式。在你的 globals.css 檔案中(如果沒有這個檔案就自己新增)，加入以下內容:

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

這三行就像是發出命令:「好啦!現在開始料理吧!」Tailwind 就會依照這些指令，開始布置你的網頁樣式啦!

就是這樣啦!現在你已經成功在 NextJS 專案中安裝並設定好 TailwindCSS 了!開心嗎?趕快開始在你的網頁中使用這個超級實用的 CSS 框架，創造出美美的網頁樣式吧!如果還有任何疑問，歡迎私訊小編我喔~祝你工作順利!