Next JS buggy template literals

Question

I have an next.js app and I see that stuff in template literals doesn't get rendered often. Searched around google most likely there is a solution to that just wasn't willing to spend so many hours looking into it.

import { displayMediaQueries } from '@/constants'

    export const displayMediaQueries =
  'w-[1200px] xl:w-[1000px] lg:w-[800px] md:w-[600px] sm:w-[400px] xs:w-full'



      <div className={`${displayMediaQueries} my-0 mx-auto h-[50px]`}>
        <Navbar />
      </div>

I see that the code is correct and it works, and after some refreshes it just breaks itself. Am I using some bad practices so that it happens? Don't have much experience with Next, is it usually that buggy? Interesting thing that happens is that if I write for example w-[1200px] next to the template literal where it's being used, then refresh the site and then remove the w-[1200px] from the template literal it fixes itself?

Thankful in advance!

I tried restarting the server, looked if something is wrong with my code - apparently everything seems fine, and searched google for that exact problem where it gets temporarily fixed after I manually write and remove it.

Answer 1

The problem is definitely not in the Next.js, but in the tailwind.

Since it generates the necessary styles beforehand, adding them dynamically can be problematic. The key advantage of tailwind is that you can define all the values for your design system up front, and use them all over the place. And that way you end up with a small amount of styles. All other styles will be missing in your bundle, so that is why you don't see the result sometimes - these classnames were not included in your bundle.

The use of square brackets is rather an exception for some rare cases that you don’t want to put in the theme config. You use these brackets for each of the values, which is essentially the same as writing styles with plain CSS. Tailwind is basically a ui system, so use it or set your own values.

And for dynamic or conditional styles use something like clsx or classnames libs, it's quite handy