Next.js中Tailwind CSS类不生效问题求助

• content配置未覆盖TSX文件
  你的tailwind.config.js里content字段仅包含.html和.js文件，但页面使用的是.tsx后缀，Tailwind无法扫描到这些文件内的类名，因此不会生成对应的样式规则。
  修改配置如下：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: ["./src/**/*.{html,js,ts,tsx}"], // 新增ts、tsx后缀
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 未在全局入口导入globals.css
  确认你在pages/_app.tsx（或pages/_app.jsx）中导入了globals.css——这是Next.js加载全局样式的核心入口，未导入的话Tailwind的基础样式、组件类、工具类都不会生效。示例代码：

  import '../styles/globals.css' // 路径需匹配你的实际文件结构
  import type { AppProps } from 'next/app'
  
  export default function App({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />
  }
  

• 未重启开发服务器
  修改tailwind.config.js后，必须重启Next.js的开发服务器（停止当前npm run dev进程后重新启动），否则新的配置不会被加载生效。

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