I am currently working on a NextJS 14 project where I am integrating Tailwind CSS. Here is a snippet of the code I am using:
<div className="text-amber-dim md:text-amber flex-1 h-screen flex items-center justify-center">
<div className="absolute z-[1] cursor-default">
<CubeAnimation size={140} />
</div>
</div>
In addition, I have defined the following classes:
* Class for amber text */
.text-amber {
color: rgb(var(--amber));
background-color: rgb(var(--background-rgb));
}
/* Class for amber text but dimmer */
.text-amber-dim {
color: rgba(var(--amber-dim));
}
The issue I am facing is that the brighter color class, prefixed with md, is not applying where it should. It is supposed to apply .text-amber on displays wider than 640px, but it never changes the colors regardless of the width.
After referencing Tailwind's documentation on responsive design, I learned that Tailwind CSS follows a mobile-first breakpoint system. This means that unprefixed utilities are applied across all platforms, while prefixed utilities come into effect at the specified breakpoint and above. Despite this, I tested the code in a window wider than 640px and the colors did not adjust accordingly.
I have checked for any overrides, of which there are none. I also attempted to add more content directories, but that did not solve the issue. Furthermore, I have confirmed that the tags are successfully hydrated:
<div class="text-amber-dim md:text-amber flex-1 h-screen flex items-center justify-center"></div>
The child of the <div> is a <pre> tag, and I even tried moving the color tags onto the <pre> tag itself, but that also did not resolve the problem.