Tailwind 需要刷新才能应用 Next.js 13 中的更改

Question

我使用 Next.js 13 创建了一个新项目，并像往常一样添加了 Tailwind，但我所做的更改不会立即应用，需要刷新整个页面才能生效。我粘贴了我的配置。也许我错过了一些东西。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./layout/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
// some customization here, omitting
    },
  },
  plugins: [],
}

.babelrc

{
    "presets": ["next/babel"],
    "plugins": []
  }

全局变量.css

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

我将它们包含在 _app.tsx 中import '../styles/globals.css'

另外，这是我的依赖项。

"dependencies": {
    "@react-google-maps/api": "^2.13.1",
    "@types/node": "18.11.9",
    "@types/react": "18.0.24",
    "@types/react-dom": "18.0.8",
    "axios": "^1.1.3",
    "eslint": "8.26.0",
    "eslint-config-next": "13.0.2",
    "next": "13.0.2",
    "react": "18.2.0",
    "react-circular-progressbar": "^2.1.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.6.0",
    "react-query": "^3.39.2",
    "react-toastify": "^9.1.1",
    "typescript": "4.8.4"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.18",
    "tailwindcss": "^3.2.1"
  }

Answer 1

尝试这个临时修复。

content: [
  "./app/**/*.{js,ts,jsx,tsx}",
  "./pages/**/*.{js,ts,jsx,tsx}",
  "./components/**/*.{js,ts,jsx,tsx}",
  "./layout/**/*.{js,ts,jsx,tsx}",
  "!./node_modules", //  
],