Next.js Discord

Discord Forum

Tailwind breakpoints do not work

Answered
Whiteleg shrimp posted this in #help-forum
Open in Discord
Whiteleg shrimpOP
Next 15
Tailwind 4


Well it doesn, technically. only xl has any effect, and only in the specific part of code... (yeh).

An example:

<Link href="/" className="flex items-center ">
    <Image src="/BetterLogo-nobg.png" alt="Logo" width={60} height={60} />
    <span
      style={{ fontFamily: "PilatExtended" }}
      className="logo-text ml-2 text-white text-xl font-bold hidden sm:block"
    >
       LOGO
    </span>
  </Link>


LOGO text should be visible from sm (640px) and up. And hidden below. It has absolutely no effect. Neither md or xl or anything. Apart from in that very specific part where i call xl to change component to flex. Funny thing, neither md or sm or anything works in place of xl there.

Even tried to manually add:

@theme inline {
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
}


I'm about to fly up in stratosphere from the sheer frustration. Any1 up to get also frustrated with me?
Answered by Whiteleg shrimp
god solved it
View full answer

4 Replies

Whiteleg shrimpOP
<nav className="hidden xl:flex gap-6">
        {["Home", "Leagues", "About", "Docs"].map((item) => (
          <Link
            key={item}
            href={`/${item.toLowerCase()}`}
            className="text-white text-[18px] leading-[22px] font-normal hover:text-gray-300 transition-colors font-manrope"
          >
            {item}
          </Link>
        ))}
      </nav>


part where the xl and only xl has the effect.
Is there any way to flush tailwind safely and kinda re-install it or something, does it caches somewhere?
Whiteleg shrimpOP
by a miracle it suddenly started working. i have no idea what happened.
Whiteleg shrimpOP
god solved it
Answer