Dynamic Backgrounds in Next.js + Tailwind CSS Hero Section: Issue with Rendering from Constants

[echo ibex]

Hey everyone! 👋

I hope you're all doing well. I've been working on a project using Next.js and Tailwind CSS that involves having a HERO section on every page, each with a different background image. However, I'm encountering a problem with dynamic background rendering. Here's a breakdown:

Tailwind Configuration:

// tailwind.config.js
module.exports = {
  // ... other configurations
  theme: {
    extend: {
      backgroundImage: {
        home: "url('/assets/images/bg/hero-bg.jpg')",
        store: "url('/assets/images/bg/store-bg.jpg')",
        about: "url('/assets/images/bg/about-bg.jpg')",
        contact: "url('/assets/images/bg/contact-bg.jpg')",
        cta: "url('/assets/images/bg/CTA-bg.jpg')",
      },
    },
  },
}

Constants for About Page:

// constants.js
export const aboutHero = [
  { background: "bg-about", heading: "About Us" }
];

Component Implementation:

// SomeComponent.js
import { aboutHero } from 'path/to/constants';
import Hero from 'path/to/Hero';

// ...

{aboutHero.map((about, index) => (
  <Hero key={index} image={about.background} heading={about.heading} />
))}

Dynamic Hero Component:

// Hero.js
const Hero = ({ image, topText, heading, button }) => {
  return (
    <section
      className={`hero-radius min-h-[87vh] ${image} bg-cover bg-center`}
    >
      {/* Content goes here */}
    </section>
  );
};

export default Hero;

Problem Statement:

The problem arises when dynamically passing the background to the Hero component; it doesn't seem to work as expected. However, hardcoding the background, such as "bg-home" or "bg-about," works perfectly fine.

Any insights on what might be causing this issue would be greatly appreciated! 🙏

[limber summit]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[short dagger]

does constants.js include in the content array in tailwind.config.js?

[echo ibex]

No, I haven't defined it there, and I think it is the problem.
I'm new to Next.js.

//tailwind.config.js
content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ]```
could you please tell me more about content?

[short dagger]

what is the path of constants.js? you need to add it inside the content array

[echo ibex]

its in root directory

[short dagger]

try

content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "constants.js"
  ]

[echo ibex]

i've a question
what does the ./pages path do? i know about others as i can visually see those folders in root dir.

[velvet ore]

.pages/ are used for pages router

[short dagger]

its for page router

[velvet ore]

Content array in tailwind config are for all those files and folders where you want to apply your tailwind classes. If an file is made outside the scope of that array, any tailwind class you declare won't apply

[echo ibex]

Thank you, guys! That worked! What an active community.
really loved and means alot!

[limber summit]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1210254617854607451 message)

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1210254617854607451 message)

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1210254617854607451 message)