Next.js 13（app目录）中TailwindCSS仅字体生效的问题求助

已安装最新版TailwindCSS（v3.3.1），执行npm run dev后页面仅字体发生变化，添加的Tailwind类名（如text-2xl、underline）对应的样式完全不生效。以下是相关配置文件及页面代码：

相关配置与代码 #

1. 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}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. postcss.config.js #

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

3. package.json #

{
  "name": "next-authex1dot1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "animal-avatar-generator": "^1.1.0",
    "axios": "^1.3.4",
    "bcryptjs": "^2.4.3",
    "eslint": "8.37.0",
    "eslint-config-next": "13.2.4",
    "http-errors": "^2.0.0",
    "lodash": "^4.17.21",
    "mongoose": "^7.0.3",
    "next": "13.2.4",
    "next-auth": "^4.20.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "swr": "^2.1.2",
    "validator": "^13.9.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "concurrently": "^8.0.1",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.3.1"
  }
}

4. ./app/globals.css #

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

5. ./app/layout.js #

"use client"

import "./globals.css";
import  NavBar  from "./components/navbar/NavBar";
import { SessionProvider } from "next-auth/react";


export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <SessionProvider>
          <NavBar />
          {children}
        </SessionProvider>
      </body>
    </html>
  );
}

6. 首页代码（./app/page.jsx） #

export default function HomePage() {
  return (
    <div className="container">
      <h1>Welcome</h1>
      <h1 className="text-2xl underline">
      Hello world!
    </h1>
    </div>
  );
}

排查与解决方案 #

1. 修正Tailwind内容扫描路径
   确保tailwind.config.js的content数组覆盖所有使用Tailwind类的文件，可补充mdx后缀并明确路径范围：

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

2. 强制重启开发服务器
   修改Tailwind配置后，必须重启npm run dev才能让新的扫描规则生效——Tailwind会在启动时扫描指定路径生成样式，热重载无法识别配置变更。

3. 更换CSS导入方式
   将globals.css中的@import替换为Tailwind官方推荐的@tailwind指令，避免导入顺序冲突：

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

4. 清理缓存重新编译
   删除node_modules、.next文件夹，执行npm install重新安装依赖，再启动开发服务器，彻底清理编译缓存。

5. 检查样式优先级冲突
   通过浏览器开发者工具查看元素样式，确认是否有自定义全局样式（如NavBar组件内的样式）覆盖了Tailwind类的规则。

内容的提问来源于stack exchange，提问作者Alex S.