Frontend using TailwindCSS, Vite and postcss with a MERN stack project won't show webpage elements

Question

I am building a website backend and frontend using MERN and I have finished the backend and it is now the frontend's turn to be developed.

I am using Vite, TailwindCSS and PostCSS with of course React.js. So I have built my App.jsx and built my components, sections and got some assets and, till now, nothing is executing with an error or a warning. But the localhost webpage isn't showing a single element, or background or anything.

Here is my App.jsx:

import { CustomerReviews, Footer, Hero, Popular, Services, SpecialOffers, Subscribe, SuperQuality } from "./sections";
import Nav from "./components/Nav";

const App = () => {
  
  <main className="relative">
    <Nav />

    <section className="xl:padding-1 wide:padding-r padding-b">
      <Hero />
    </section>

    <section className="padding">
      <Popular />
    </section>

    <section className="padding">
      <SuperQuality />
    </section>

    <section className="paddin-x py-10">
      <Services />
    </section>

    <section className="padding">
      <SpecialOffers />
    </section>

    <section className="bg-pale-blue padding">
      <CustomerReviews />
    </section>

    <section className="padding-x sm:py-32 py-16 w-full">
      <Subscribe />
    </section>

    <section className="bg-black padding-x padding-t pb-8">
      <Footer />
    </section>
  </main>
};

export default App;

Here is my main.jsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import 'tailwindcss/tailwind.css'
import './index.css'
import App from './App.jsx'
console.log('App has started!')

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

And here is one of the sections I have (they all follow the same pattern):

const Hero = () => {
  console.log("Hero.jsx: Hero")
  return (
    <div>TEST</div>
  )
}

export default Hero

I have opened the Inspect tool in my browser and no warnings or errors are there. Also as you can see in Hero.jsx file (last code block), I wrote a console.log, funny enough it doesn't print it in the console, however the console.log in main.jsx is working just fine.

Imports, paths, config files to all mentioned and where the console.log is are all correct (I think).

I appreciate any help I can get because I can't seem to find where the problem lies.

NOTE: I tried wrapping the App in a return(/* content */) but didn't work either.

Still, webpage is as white as snow.

Edit 1: when I write something it doesn’t show, also When I change the to it shows the content of Hero in the webpage.

I tried the bracketing thing but it made no difference

Answer 1

I discovered where the problem is, in my component there are somethings that are causing it to prohibit display of anything. So if I put a working component like the Hero component instead of Nav under the <main className:”relative”> line. So Nav contains something off.

Here is Nav (Still not done but should show something):

import { headerLogo } from '../assets/images'
import {hamburger} from '../assets/icons'
import { navLinks } from '../constants'

const Nav = () => {
    console.log('Nav has started!')
  return (
    <header className='padding=x py-8 absolute z-10 w-full'>
        <nav className='flex justify-between items-center max-container'>
            <a href="/">
                <img 
                src={headerLogo} 
                alt="logo"
                width={130}
                height={29}
                />
            </a>
            <ul className='flex-1 flex justify-center items-center gap-y-16 max-lg:hidden'>
                {navLinks.map((item) => (
                    <li key={item.id}>
                        <a 
                        href='item.href'
                        className='font-montserrat leading-normal text-lg text-slate-gray'
                        >
                            {item.label}
                        </a>
                    </li>))}

            </ul>
        </nav>
    </header>
  )
}

export default Nav