#TailwindCSS#Debugging#CSS#Frontend
5 Reasons Why Your Tailwind Styles Are Missing
Class is there, but style is missing? Debugging Tailwind CSS like a detective.
May 12, 2025
Codemapo
Class is there, but style is missing? Debugging Tailwind CSS like a detective.
Tired of naming classes? Writing CSS directly inside HTML sounds ugly, but it became the world standard. Why?
For visually impaired, for keyboard users, and for your future self. Small `alt` tag makes a big difference.
Think Android is easier than iOS? Meet Gradle Hell. Learn to fix minSdkVersion conflicts, Multidex limit errors, Namespace issues in Gradle 8.0, and master dependency analysis with `./gradlew dependencies`.
App crashed with TypeError? Learn why 'Null is not a subtype of String' happens and how to make your JSON parsing bulletproof with Zod/Freezed.
The day before a deadline, I witnessed a strange phenomenon.
I clearly gave the button bg-blue-500, but it remained transparent.
<button className={`bg-${color}-500 text-white`}>
Click Me
</button>
Opening DevTools (F12), the class was definitely in the button tag.
But checking the Styles tab, the background-color property was nowhere to be found.
Like a ghost, the class name existed, but its soul (style) was missing.
Here is my investigation log of the 5 usual suspects I interrogated that night.
Tailwind doesn't generate styles at runtime. It scans your files at Build Time. The JIT compiler reads your source code as plain text. If it sees "bg-blue-500", it generates the CSS.
Look at the problematic code again.
// ❌ The Culprit
const color = 'blue';
<button className={`bg-${color}-500`}>Click</button>
The compiler doesn't run your code. It just reads text.
It sees bg- and -500, but it doesn't see the full string bg-blue-500.
So it thinks, "Oh, nobody uses bg-blue-500," and purges it from the final CSS to save size.
// ✅ Map full strings
const colorVariants = {
blue: 'bg-blue-500',
red: 'bg-red-500',
green: 'bg-green-500'
};
<button className={colorVariants[color]}>Click</button>
Now the compiler can clearly see bg-blue-500.
content Configuration (Accomplice)The content array in tailwind.config.js is the compiler's "Search Warrant".
If a file path isn't listed here, Tailwind won't even look at it.
// tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
// ⚠️ Did you create a new folder (e.g., components/ui) and forget to add it?
],
// ...
}
I once faced this in a Monorepo setup where I forgot to add the shared UI package path to content.
If you made a new directory outside the usual src, make sure to add it here.
The class is applied, but beaten by another style. This often happens when mixing Tailwind with legacy CSS or libraries like Bootstrap.
prop If you see the style crossed out with a strike-through in DevTools, this is it.
Solution 1: The Nuclear Option (!important)
<div className="bg-red-500!" /> {/* Tailwind 3.x syntax */}
Solution 2: Increase Specificity
Ensure your @tailwind base; comes after other library imports, or wrap your app in an ID selector to boost specificity.
Sometimes, computers are just dumb. You changed the config, but nothing happened? The JIT compiler might be caching old results.
Solution: Turn it off and on again..next folder or node_modules/.cache."Have you tried turning it off and on again?" remains the golden rule of IT.
What if you absolutely MUST use dynamic classes? (e.g., Colors coming from a CMS).
You can tell the compiler, "Keep these classes no matter what" using safelist.
// tailwind.config.js
module.exports = {
safelist: [
'bg-red-500',
'text-3xl',
{
pattern: /bg-(red|green|blue)-(400|500)/, // Regex works too!
},
],
// ...
}
Warning: This increases your CSS bundle size. Use explicitly mapped objects (Suspect 1) whenever possible.
Sometimes we overthink it.
Is it text-grey-500 or text-gray-500? (Tailwind uses gray by default).
Is it flex-center? (No such class, it's flex justify-center items-center).
Unlike dynamic styling errors, these usually don't show up in DevTools because the class name itself is invalid. Install the Tailwind CSS IntelliSense plugin for VS Code. It saves lives.
In my case, the villain was Suspect 1 (Dynamic Class Construction).
As soon as I replaced bg-${color}-500 with a full-string object map, the button turned a beautiful shade of blue.
If your styles go missing, don't panic. Interrogate these 5 suspects. The culprit is definitely among them.
I once merged a PR, and 5 minutes later, the CEO messaged: "Why is the dashboard broken?" It worked fine on Localhost. It broke on Production.
The Cause:
The backend sent status names (active, inactive). I used them like text-${status}-500.
On Local environment (JIT), it worked because JIT watches files.
On Production Build, PurgeCSS saw no usage of text-green-500 in the source code, so it deleted it.
The Lesson:
Never trust dynamic execution for static analysis tools.
If the class name comes from the Database, use a SafeList or map it explicitly in JS.
Instead of swapping class names, swap CSS Variables. This is often cleaner and avoids PurgeCSS issues entirely.
Bad:<div className={`bg-${color}-500`}>
<div className="bg-[var(--dynamic-color)]" style={{ '--dynamic-color': color }}>
Now Tailwind generates one class bg-[var(--dynamic-color)], and the browser handles the color change at runtime. No purging issues!
When styles are missing, it is rarely a bug in Tailwind itself. It is almost always:
Check them one by one, and you will find the hidden criminal.
The upcoming Tailwind v4 engine (Oxy) promises to solve many of these issues.
But until then, we must be vigilant about Dynamic Class Names.
Q: Should I use Bootstrap instead? A: Use Bootstrap if you want a working site in 5 minutes and don't care if it looks generic. Use Tailwind if you want a custom design system that scales.
Q: Is Tailwind messy? A: Yes, your HTML looks messy. But your CSS file is empty. It's a trade-off. You stop switching contexts between HTML and CSS files.
Q: CSS-in-JS (Styled Components) vs Tailwind? A: Server Components (RSC) in Next.js make CSS-in-JS hard to use (runtime overhead). Tailwind is zero-runtime, making it the preferred choice for modern React.