I have a NextJS 14 project that I am using Tailwind CSS with. I have the following:
<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>
Additionally, the 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 brighter color class is prefixed with md, but doesn’t apply where it should. It is supposed to apply .text-amber on displays >640px in width, but never applies on any width.
Looking at Tailwind’s documentation the responsive design page notes that Tailwind CSS operates a mobile-first breakpoint system, meaning unprefixed utilities are applied on all platforms, and prefixed utilities take effect at the breakpoint and above. However, I tested the code in a window >640px and the colors did not change.
I checked my overrides, which I have none, I also tried adding more content directories which didn’t work. Additionally, I verified that the tags make it past hydration:
<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 if that changes anything. I tried to move the color tags onto the <pre> tag but that also didn’t work.
2
It seems you may have meant to write a comment “Class for amber text” but missed out a preceding slash /:
/* Class for amber text */
Your potential mistype version:
* Class for amber text */
May be causing negative effects to the selector of the rule.
Furthermore, only classes “known” by Tailwind can be modified with variants like md:. To make custom classes known to Tailwind, ensure they are in a @layer base/components/utilities, as per the documentation (emphasis mine):
For more power, you can also use the
@layerdirective to add styles to Tailwind’sbase,components, andutilitieslayers:@tailwind base; @tailwind components; @tailwind utilities; @layer components { .my-custom-style { /* ... */ } }The
@layerdirective helps you control declaration order by automatically relocating your styles to the corresponding@tailwinddirective, and also enables features like modifiers and tree-shaking for your own custom CSS.
Thus, it would seem most appropriate to wrap your custom rules in @layer utilities:
@layer utilities {
/* 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));
}
}
1