Next.js中className无法加载CSS样式的问题求助

你代码里用的是Tailwind CSS工具类（比如flex、bg-green-600这类），但默认创建的Next.js项目并未集成Tailwind，所以样式无法生效。按以下步骤配置即可解决：

1. 安装Tailwind依赖 #

在项目根目录执行命令：

npm install -D tailwindcss postcss autoprefixer

2. 生成配置文件 #

执行命令初始化Tailwind和PostCSS配置：

npx tailwindcss init -p

3. 配置Tailwind扫描路径 #

打开tailwind.config.js，修改content数组，让Tailwind能识别你的页面和组件文件：

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

4. 在全局样式中导入Tailwind指令 #

创建或修改styles/globals.css，添加以下内容：

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

5. 在全局入口引入样式 #

确保pages/_app.tsx（没有则新建）中导入全局样式：

import '../styles/globals.css'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

完成以上步骤后，重启开发服务器，你的Tailwind类名样式就能正常生效了。

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