使用Vite搭建React作品集项目时，运行npm run dev后浏览器仅显示Tailwind黑色背景但无组件内容的问题求助

阿华AIGC实验室

2026-4-28

解决React + Vite项目仅显示Tailwind背景无内容的问题

看起来你的页面没有渲染内容，大概率是代码里的未定义组件和语法/布局问题导致React渲染中断了，我帮你梳理几个关键问题：

1. App.jsx中未导入`Experience`组件

你在App组件里使用了<Experience />，但没有对应的导入语句，这会直接导致React抛出错误，页面无法正常渲染。

修正后的App.jsx：

import { Navbar } from "@/layouts/Navbar";
import { Hero } from "@/sections/Hero";
import { Projects } from "@/sections/Projects";
import { Testimonials } from "@/sections/Testimonials";
import { Contact } from "@/sections/Contact";
// 要么导入Experience组件，要么先注释掉这个标签
// import { Experience } from "@/sections/Experience";
import './index.css'

function App() {
 return (
  <>
   <div className="min-h-screen overflow-x-hidden">
    <Navbar />
    <main>
     <Hero />
     {/* 如果还没写Experience组件，先注释掉 */}
     {/* <Experience /> */}
     <Projects />
     <Testimonials />
     <Contact />
    </main>
   </div>
  </>
 );
}

export default App;

2. Hero组件中的多个语法与布局问题

你的Hero组件里有不少会导致渲染异常的问题：

2.1 未导入`ArrowRight`组件

你在Button里用了<ArrowRight />，但没有导入这个组件，会引发错误。要么导入它，要么暂时替换成文字或移除。

2.2 混用`class`和`className`

React中元素的类名必须用className，你这里写了<span class="inline-flex items-center...">，要改成className。

2.3 模板字符串语法错误

动画点的style里，left: {Math.random() * 100 }%``是错误的，正确的模板字符串应该是left: ${Math.random() * 100}%（去掉多余的大括号）。

2.4 元素布局混乱

所有文本、按钮都直接放在<section>根节点下，没有合理的容器包裹，加上绝对定位的背景，很可能导致内容被覆盖或者挤出视口。需要把内容放到之前定义的container容器里，或者调整层级。

修正后的Hero组件片段：

// 先导入需要的组件，比如ArrowRight（假设它在某个路径）
// import { ArrowRight } from '@/components/ArrowRight';
import Button from '@/button';

export const Hero = () => {
 return (
  <section className="relative min-h-screen flex items-center overflow-hidden">
   <div className="absolute inset-0 bg-linear-to-b from-background/20 via-background">
    <img src="/hero-bg.jpg" alt="Hero Image" className="w-full h-full object-cover opacity-40" />
   </div>
   <div className="absolute inset-0 overflow-hidden pointer-events-none">
    {[...Array(30)].map((_, i) => (
     <div 
       key={i} {/* 别忘了加key属性避免React警告 */}
       className="absolute w-1.5 h-1.5 rounded-full opacity-60" 
       style={{ 
         backgroundColor: "#20B2A6", 
         left: `${Math.random() * 100}%`, 
         top: `${Math.random() * 100}%`, 
         animation: `slow-drift 50s ${15 + Math.random() * 20}s ease-in-out infinite`, 
         animationDelay: `${Math.random() * 5}s`, 
       }} 
     />
    ))}
   </div>

   {/* 把所有内容放到container容器里，确保层级在背景之上 */}
   <div className="container mx-auto px-6 pt-32 pb-20 relative z-10">
    <div className="grid lg:grid-cols-2 gap-12 items-center">
     <div className="space-y-8">
      <div className="animate-fade-in">
       <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-primary">
        <span className="w-2 h-2 bg-primary rounded-full animate-pulse"></span>
        Front End Developer React Typescript MongoDB
       </span>
      </div>

      <div className="space-y-4">
       <h1>
        <span className="font-serif italic font-normal text-white">Pleased To Meet You </span>
       </h1>
       <p className="text-lg text-muted-foreground max-w-lg animate-fast">
        Hi Welcome to my personalised portfolio where I showcase my current work and projects using ReactJS and Typescript, my apps and scalable front end websites are diverse and using APIS.
       </p>
       <div>
        <Button size="lg">
         Contact Me
         {/* 暂时用文字代替，或者导入ArrowRight */}
         {/* <ArrowRight className="w-5 h-5" /> */}
         <span className="w-5 h-5 ml-2">→</span>
        </Button>
       </div>
      </div>

      <div className="space-y-4">
       <h1 className="lg:text-7xl font-bold leading-tight animate-fade-in animation-delay-100">
        <span className="primary glow-text">Digital</span>
       </h1>
       <h1 className="italic font-normal text-white">Projects</h1>
       <h1 className="lg:text-7xl font-bold leading-tight animate-fade-in animation-delay-800">
        <span className="primary glow-text">World</span>
       </h1>
       <Button size="lg">Click Me </Button>
      </div>
     </div>
    </div>
   </div>
  </section>
 );
};