Tailwind CSS bg-black类不生效问题求助（Next.js环境）

按照Tailwind官方指南执行命令 npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p 完成安装后，在Next.js项目中使用bg-black类设置背景色，但样式未生效。尝试过调整global.css中@import语句的换行，问题依旧，期望实现黑色背景的效果。

项目采用src目录结构，包含pages、styles等核心文件夹。

相关文件内容 #

src/styles/global.css #

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

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

src/pages/index.js #

import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className='bg-black'>
        Home
      </main>
    </>
  )
}

解决方案 #

核心问题是你没有在项目中导入全局样式文件，Next.js不会自动加载global.css，需要在_app.js/_app.tsx中手动导入：

1. 打开src/pages/_app.js（如果没有则创建该文件）
2. 添加全局样式的导入语句，示例代码如下：

import '@/styles/global.css'

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

额外检查点：

• 确认postcss.config.js存在且配置正确，默认生成的文件内容应为：

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

• 重启Next.js开发服务器，Tailwind的配置或样式变更需要重启才能生效。

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