使用Tailwind CSS为Header组件样式不生效问题排查求助

云原生阿岚

2026-6-17

Tailwind CSS样式不生效排查：HeaderItem内图标与p标签样式无效果

我尝试用Tailwind CSS为Header组件中的HeaderItem容器、内部Home图标及p标签设置样式，但Header或外层标签的样式能正常生效，图标和p标签的样式却完全没有变化，怀疑是Tailwind配置问题但无法定位具体原因。

相关代码

Header.js

import {
    BadgeCheckIcon,
    CollectionIcon,
    HomeIcon,
    LightningBoltIcon,
    SearchIcon,
    UserIcon,
} from "@heroicons/react/24/outline";
import Image from "next/image";
import HeaderItem from "./HeaderItem";

function Header() {
  return (
    <header className="">
        <div>
            {/* 组件中使用的图标 */}
            <HeaderItem title='HOME' Icon={HomeIcon}/>
        </div>
        {/* Header中的Logo图片 */}
        <Image
            className="object-contain"
            src='/images/hulu.png' 
            width={200} 
            height={100}
        />
    </header>
  )
}

export default Header

HeaderItem.js

function HeaderItem({ Icon, title }) {
  return (
    <div>
        <Icon className='h-8 mb-1'/>
        <p className="opacity-0 hover:opacity-100 tracking-widest">{title}</p>
    </div>
  );
}

export default HeaderItem;

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [],
};