如何修復 Tailwind CSS 在 Next.js 中不起作用的問題

如果您遇到 Tailwind CSS 未在 Next.js 專案中套用樣式的問題，本指南將引導您完成如何解決該問題。我們將一步步進行，涵蓋安裝、故障排除和潛在修復。

步驟1：刪除.next資料夾、node_modules和package-lock.json

開始之前，如果 Tailwind CSS 在安裝後仍無法正常運作，乾淨的設定可能會解決問題。

刪除以下檔案和資料夾：

• 下一個資料夾（儲存 Next.js 建置檔案）
• node_modules資料夾（儲存專案依賴）
• package-lock.json 檔案（確保安裝一致 rm -rf .next node_modules package-lock.json ### 第 2 步：重新安裝依賴項 刪除上述檔案後，您需要重新安裝專案依賴項以確保乾淨安裝。

執行以下命令重新安裝node_modules並重新產生package-lock.json

npm 安裝
npm run dev

第 3 步：驗證 Tailwind CSS 設置

請按照以下步驟確保您已正確安裝 Tailwind CSS

安裝 Tailwind CSS：

npm install -D tailwindcss postcss autoprefixer
初始化 Tailwind：

npx tailwindcss init -p
這將建立 tailwind.config.js 和 postcss.config.js 檔案。

設定 tailwind.config.js：確保正確設定內容路徑以包含您的專案檔案：

將其新增至 tailwind.config.js

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

新增 postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

將 Tailwind 加入 CSS：在 globals.css 檔案（通常位於 styles 中）中，加入以下內容：

css 在 global.css 或 index.css 中使用

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

第 4 步：常見問題和修復

• 即使按照上述步驟操作，您可能仍然會遇到問題。以下是一些常見問題和修復方法：

• PurgeCSS 問題：確保 PurgeCSS 不會在生產建造期間刪除您的樣式。檢查 tailwind.config.js 的正確路徑。

• 檢查 CSS 衝突：如果您使用其他 CSS 框架或自訂樣式，它們可能與 Tailwind 衝突。透過檢查樣式覆蓋來確保 Tailwind 正確載入。

• 開發模式：如果 Tailwind 樣式沒有更新，請嘗試清除瀏覽器快取或重新啟動開發伺服器。

以上是如何修復 Tailwind CSS 在 Next.js 中不起作用的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！