NextJS默认Tailwind模板样式失效求助：3.2.0+版本异常

系统信息 #

> Windows 11
> Node: v18.16.0
> Next: 13.4.13
> 测试浏览器：Firefox、Chrome

复现步骤 #

通过npx create-next-app tezz创建NextJS项目，选择如下配置：

Would you like to use TypeScript? ... **No** / Yes
Would you like to use ESLint? ... **No** / Yes
Would you like to use Tailwind CSS? ... No / **Yes**
Would you like to use `src/` directory? ... **No** / Yes
Would you like to use App Router? (recommended) ... **No** / Yes
Would you like to customize the default import alias? ... **No** / Yes
Creating a new Next.js app in X:\web\tezz.

Using npm.

Initializing project with template: default-tw

Installing dependencies:
react
react-dom
next
tailwindcss
postcss
autoprefixer

运行开发服务或编译生产版本时，Tailwind样式无法正常工作（仅字体和部分深色背景生效），按钮等组件样式失效，控制台输出如下警告：

> tezz@0.1.0 dev
> next dev

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- event compiled client and server successfully in 322 ms (18 modules)
- wait compiling...
- event compiled client and server successfully in 288 ms (18 modules)
- wait compiling / (client and server)...
- wait compiling /_error (client and server)...

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
- event compiled client and server successfully in 3.8s (211 modules)

相关配置文件 #

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}

./styles/globals.css #

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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

_app.js #

import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

特殊现象 #

将Tailwind版本降级至3.1.8时，样式完全正常；升级至3.2.0及以上版本则样式混乱。降级前依赖如下：

"dependencies": {
    "autoprefixer": "10.4.14",
    "next": "13.4.13",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3"
  }

效果对比 #

• Tailwind 3.3.3渲染效果：
• Tailwind 3.1.8渲染效果：

解决建议 #

1. 修正Tailwind内容匹配路径：由于项目使用Pages Router（未启用App Router），移除tailwind.config.js中不存在的./app/**/*路径，同时简化匹配后缀（项目未用TypeScript和MDX，可只保留js,jsx）：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,jsx}',
    './components/**/*.{js,jsx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}

2. 清除缓存并重启服务：删除Next.js缓存目录.next和Node缓存，重新安装依赖后启动服务：

rmdir /s /q .next node_modules\.cache
npm install
npm run dev

3. 更新适配依赖：升级postcss和autoprefixer至最新版本，确保与Tailwind 3.3.x兼容：

npm install postcss@latest autoprefixer@latest

4. 验证全局样式导入：确认_app.js中@/styles/globals.css的别名配置正确，或改用相对路径./styles/globals.css测试。

内容的提问来源于stack exchange，提问作者encrypt0r