I’m working on a project using Tailwind CSS and Next.js. Despite extensive research, I’ve encountered an issue I can’t resolve.

The Problem:

I am trying to use pseudo-elements ::before and ::after to render two local images. However, the images do not display on the screen. Interestingly, the images load correctly when I use URLs from the internet.

This is my code inside my tailwind.config.js

module.exports = {
    content: ["./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}"],
    theme: {
        extend: {
            content: {
                lianeG: 'url("/assets/images/lianeG.svg")',
                lianeD: 'url("/assets/images/lianeD.svg")',
            },
            // URL from internet -> it works.
            // content: {
            //     lianeG: 'url("https://picsum.photos/100")',
            //     lianeD: 'url("https://picsum.photos/100")',
            // },
        },
    },
    plugins: [],
};

More info : I tried to move my images in a Public folder too

The code from header.js

import Image from "next/image";
import bouncyMoki from "../assets/images/bouncyMoki.svg";

export default function Header() {
    return (
        <div className="relative before:content-lianeG after:content-lianeD before:absolute before:top-0 before:left-0 after:absolute after:top-0 after:right-0 after:inline-block after:size-40">
            <div className="flex justify-around p-5 bg-[#F5F3E2]">
                <Image src={bouncyMoki} className="size-12 animate-bouncy-move" alt="Bouncy Moki" />
            </div>
            <div>
                <nav className="bg-[#276B4D] mx-auto m-5 p-2 font-poppins font-medium text-white">
                    <ul className="flex justify-around">
                        <li className="p-5">
                            <a href="#monkeysGif ">Monkeys Gifs</a>
                        </li>
                        <li className="p-5">
                            <a href="#trendyGif">Trending Gifs</a>
                        </li>
                        <li className="p-5">
                            <a href="#fishesGif">Fishes Gifs</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    );
}

In my terminal this message pop when i reload my page :

GET /assets/images/lianeG.svg 404 in 16ms
GET /assets/images/lianeD.svg 404 in 14ms

Additional Information:

• ::before and ::after element are created in the HTML as expected, but they are not displaying my images from my local folder.

• I’ve tried various paths to ensure the images are correctly referenced and a lot of stuff i’ve found on internet without succes. If the path isn’t correct there is an error message anyway.

• I’ve tried to create it inside Global.css file, same thing, ::before
  and ::after element are created in the HTML, but they are not
  displaying my images.

As you can see, they’re created on my html :

HTML Render with inspect element

Any help or insights would be greatly appreciated! Thanks 🙂

Update : My next.config.msj as asked in the comments section

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'i.giphy.com',
        port: '',
        pathname: '**',
      },
    ],
  },
};

export default nextConfig;