Query Description When implementing Tailwind CSS with dynamic color classes, some hex color codes function correctly while others do not apply, despite using the same syntax and method.
Demonstration of Success
- cardColor="[#008ffb]" // Works without any issues for text-[#008ffb] and bg-[#008ffb]
- cardColor="[#ff9920]" // Successful implementation
- cardColor="[#d83b34]" // Implementation without errors Examples that Do Not Work
- cardColor="[#FBCFE8]" // Does not render properly
- cardColor="[#E0F2FE]" // Does not display as expected
- cardColor="[#1b2559]" // Fails to work
- cardColor="[#111c44]" // Unable to apply styles
Methodology Component utilization
<CustomCard
title="Saved Venues"
cardColor="[#008ffb]"
addclassName=""
>
Component realization
<h2 className={`text-${cardColor} text-shadow-sm text-3xl font-mono`}>
{title}
</h2>
<div className={`h-[1px] -mt-1 mb-4 bg-${cardColor}`}>
</div>
Insights
- The structure remains consistent across all color codes
- Certain colors are effective for both text and background styling
- Some colors only work partially (e.g., #d1f5f0 works for background but not text)
- Letter case does not impact the result
- The operative colors are already in use elsewhere within the project
- The issue persists even when non-working colors are directly applied in other Tailwind classes in the same project
Inquiries
- What causes certain hex colors to function seamlessly while others fail despite having matching syntax?
- Is there a discernible pattern regarding which colors succeed and which do not?
- Could this issue be linked to how Tailwind deals with dynamic class names featuring arbitrary values?
- Does Tailwind treat internal color processing differently from arbitrary values when handling color codes?
Setting
- Next.js
- Tailwind CSS
- TypeScript
- shadcn/ui components
Solution Approach Presently resorting to utilizing known functional colors (e.g., #008ffb) as a workaround, seeking deeper understanding of the root cause behind this behavior.