Troubleshooting Tailwind CSS classNames in Next.js

Question

I'm working on a Next.js project and using Tailwind CSS for styling. However, I'm encountering an error related to classNames in my page.js file. I've checked my import statements, but the error persists. Can anyone help me identify what might be causing this issue and how to resolve it?

Code snippet:

import Link from "next/link";

const getSeries = async() => {
    try {
      const res = await fetch('http://localhost:3000/api', {cache: "no-store"});
      if (!res.ok) {
        throw new Error("Fetching failed");
      };
      return res.json();
    } catch (error) {
      console.error("Series Collection: c%FAILED","color:red",error);
    }
  } 
  

export default async function Series() {
    const {series} = await getSeries();

    return (
        <main>
            {series?.map((serie) => {
                return (
                    <div className="flex flex-col">
                    <div className="flex justify-between">
                    <div>
                        <div className="flex flex-col justify-start">
                        <h1 className="text-white font-extrabold pt-2 px-2 mt-2 mx-2">{serie.name}</h1>
                        <div className="flex justify-between pb-2 px-2 mt-2 mx-2">
                            <p className="text-orange-300 md:star_gradient font-extrabold">{serie.author}</p>
                            <p className="opacity-80 text-white font-extrabold ">{serie.rate}</p>
                        </div>
                        </div>
                    </div>
                    <Link href={`@/app/${serie}`} className="rounded opacity-80 bg-blue-500 text-center p-2 m-2 text-white font-extrabold shadow-sm">
                        See More
                    </Link> 
                    </div>
                    <div className="flex carousel">
                      {serie.episodes?.map((episode) => {
                        <Link className={`bg-gradient-to-b from-[url("${episode.thumbnail}")] to-black flex align-end justify-end p-2 m-2 h-[300px] w-[640px] rounded shadow-md`} href={`@/app/${serie}/${episode.id}`}>
                        <h1>{episode?.name}</h1>
                        </Link>
                      })}
                    </div>
                </div>
            )})}
        </main>
  )
} 

Error Message:

./app/globals.css:4:0
Module not found: Can't resolve './{'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./app/globals.css

I suspect the issue might be related to the classNames in the page.js file, even though my import statements seem correct. Any guidance on debugging and resolving this would be greatly appreciated.

Note: I need the image to be there since is a great part of my UI

Answer 1

I believe the error could be due to from-[url("${episode.thumbnail}")]. This would make Tailwind generate a rule like:

.from-\[url\(\"\$\{episode.thumbnail\}\"\)\] {
  --tw-gradient-from: url("${episode.thumbnail}") var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

This could then lead to your build system to try to resolve ${episode.thumbnail} as a path in some way.

Also relevant is that you cannot use string concatenation/interpolation to build Tailwind class names. As per the documentation:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

Don’t construct class names dynamically

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes. Instead, make sure any class names you’re using exist in full:

Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

Furthermore, a url() value for from-* would be non-sensical, since it would resolve to a linear-gradient() color stop, of which, a url() value would be invalid. In other words, you seem to be attempting to apply the equivalent CSS from bg-gradient-to-b from-[url("${episode.thumbnail}")] to-black:

selector {
  background-image: linear-gradient(to bottom, url("${episode.thumbnail}"), black);
}

Which is again, invalid CSS.

To resolve, consider using a color value for the from- class.