Tailwind CSS Debugging Checklist
Systematic guide to fixing common Tailwind issues.
Check off items as you troubleshoot.
🎯 Classes Not Applying
When Tailwind classes appear in your HTML but styles don't show up
Check for typos in class names
Tailwind classes are case-sensitive and must be spelled exactly right.
Verify Tailwind CSS is imported
Your main CSS file must include the Tailwind directives.
Check CSS specificity conflicts
Other CSS rules might be overriding Tailwind classes due to higher specificity.
Check CSS load order
If Tailwind loads before other stylesheets, those styles will override it.
Avoid dynamically constructing class names
Tailwind can't detect classes that are built from string concatenation.
🏭 Production Build Issues
Classes work in development but disappear in production
Check content paths in config
Tailwind scans files in your content array to find classes. Missing paths = missing classes.
Safelist dynamic classes
Classes generated at runtime or from CMS content won't be detected during build.
Clear build cache
Old cached builds might be served instead of fresh ones.
Verify NODE_ENV is set correctly
Tailwind v3+ uses Just-in-Time compilation; NODE_ENV affects some behaviors.
⚙️ Configuration Problems
Issues with tailwind.config.js settings
Config file location
Tailwind must find your config file. It looks in the project root by default.
Use extend to add values, not replace
Setting values directly in theme replaces all defaults. Use theme.extend to add to them.
Check plugin compatibility
Some plugins may conflict or require specific Tailwind versions.
Check if prefix is configured
If you set a prefix, all classes must use it.
🔍 DevTools Debugging
Using browser DevTools to debug Tailwind issues
Inspect the element's computed styles
DevTools shows which CSS rules are applied and which are overridden.
Verify classes are in the DOM
Sometimes React/Vue conditional rendering doesn't add classes as expected.
Search for the class in Sources
Verify the class exists in your compiled CSS bundle.
Check responsive breakpoint
Responsive classes only apply at specific viewport widths.
⚛️ Framework-Specific Issues
Common problems with Next.js, React, Vue, etc.
Next.js App Router: Import CSS in layout
In Next.js 13+ App Router, global CSS must be imported in app/layout.tsx.
CSS Modules conflict
CSS Modules scope class names, which can conflict with Tailwind.
styled-components ordering
styled-components injects styles at runtime, which may override Tailwind.
Vue scoped styles conflict
Vue's scoped CSS adds data attributes that increase specificity.
📋 Quick Reference
Common fixes at a glance
Hover states not working
hover: variants only work on elements that can be hovered.
Dark mode not working
Dark mode requires either class or media strategy configuration.
Arbitrary values not working
Arbitrary values like w-[123px] have specific syntax requirements.
group/peer not working
group-hover and peer require specific HTML structure.
Debug Tailwind Visually with Frontend Hero
Stop guessing why classes aren't working. Frontend Hero's Tailwind Scanner shows you exactly what classes are applied to any element, and lets you toggle them on/off in real-time.
- ✓See all Tailwind classes on any element
- ✓Toggle classes on/off to test styles
- ✓Copy classes with one click
- ✓Works on any website, any framework
Still Stuck?
Create a Minimal Reproduction
Strip down your code to the smallest example that shows the bug. Often you'll find the issue while doing this.
Check GitHub Issues
Search the Tailwind CSS GitHub issues for similar problems.
Ask on Discord
The Tailwind CSS Discord community is helpful and active.
Check Framework Docs
Your framework (Next.js, Vite, etc.) may have specific Tailwind setup requirements.
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow