Tailwind CSS Classes Not Applying - Styles Ignored
Tailwind CSS classes aren't being applied to elements. You add classes like 'bg-blue-500' but the element stays unstyled.
Sometimes works in some components but not others. Manual styles work fine.
Error Messages You Might See
Common Causes
- Tailwind not configured in tailwind.config.js or config missing CSS input path
- CSS file not imported in main layout or root component
- Dynamic class names (string templates) not scanned by Tailwind content config
- CSS Autoprefixer or PostCSS not configured properly
- Purged classes - content config doesn't include template files with classes
How to Fix It
Verify tailwind.config.js content includes all template paths: content: ['./src/**/*.{js,jsx,ts,tsx}']
Ensure CSS imported in root: import 'tailwindcss/tailwind.css'
Avoid dynamic class names: const className = `text-${color}` won't work. Use full class names or Tailwind merge utility
Check PostCSS config has Tailwind plugin
Rebuild after config changes: npm run dev
Real developers can help you.
Kingsley Omage
Fullstack software engineer passionate about AI Agents, blockchain, LLMs.
Simon A.
I'm a backend developer building APIs, emulators, and interactive game systems. Professionally, I've developed Java/Spring reporting solutions, managed relational and NoSQL databases, and implemented CI/CD workflows.
Daniel Vázquez
Software Engineer with over 10 years of experience on Startups, Government, big tech industry & consulting.
Victor Denisov
Developer
Matthew Butler
Systems Development Engineer @ Amazon Web Services
Mehdi Ben Haddou
- Founder of Chessigma (1M+ users) & many small projects
- ex Founding Engineer @Uplane (YC F25)
- ex Software Engineer @Amazon and @Booking.com
legrab
I'll fill this later
prajwalfullstack
Hi Im a full stack developer, a vibe coded MVP to Market ready product, I'm here to help
Richard McSorley
Full-Stack Software Engineer with 8+ years building high-performance applications for enterprise clients. Shipped production systems at Walmart (4,000+ stores), Cigna (20M+ users), and Arkansas Blue Cross. 5 patents in retail/supply chain tech. Currently focused on AI integrations, automation tools, and TypeScript-first architectures.
Bastien Labelle
Full stack dev w/ 20+ years of experience
You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.
Get HelpFrequently Asked Questions
Why don't dynamic Tailwind classes work?
Tailwind uses static analysis. text-${color} is a template and Tailwind can't scan it. Use full class names or mapping
How do I use arbitrary values instead?
Use bracket syntax: bg-[#1234567] for custom colors, or configure in tailwind.config.js
Should I use CSS modules with Tailwind?
Tailwind works best without CSS modules. Use utility-first directly in JSX