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.
Nam Tran
10 years as fullstack developer
Krishna Sai Kuncha
Experienced Professional Full stack Developer with 8+ years of experience across react, python, js, ts, golang and react-native. Developed inhouse websearch tooling for AI before websearch was solved : )
Matthew Jordan
I've been working at a large software company named Kainos for 2 years, and mainly specialise in Platform Engineering. I regularly enjoy working on software products outside of work, and I'm a huge fan of game development using Unity. I personally enjoy Python & C# in my spare time, but I also specialise in multiple different platform-related technologies from my day job.
Pratik
SWE with 15+ years of experience building and maintaining web apps and extensive BE infrastructure
BurnHavoc
Been around fixing other peoples code for 20 years.
Jaime Orts-Caroff
I'm a Senior Android developer, currently working at Aircall. I'm open to work in various fields!
Basel Issmail
’m a Senior Full-Stack Developer and Tech Lead with experience designing and building scalable web platforms. I work across the full development lifecycle, from translating business requirements into technical architecture to delivering reliable production systems.
My work focuses on modern web technologies, including TypeScript, Angular, Node.js, and cloud-based architectures. I enjoy solving complex technical problems and helping teams turn product ideas and prototypes into working platforms that can grow and scale.
In addition to development, I often collaborate closely with product managers, business analysts, designers, and QA teams to ensure that solutions align with both technical and business goals.
I enjoy working with startups and product teams where I can contribute both as a hands-on engineer and as a technical partner in designing and delivering impactful software.
Anthony Akpan
Developer with 8 years of experience building softwares fro startups
rayush33
JavaScript (React.js, React Native, Node.js) Developer with demonstrated industry experience of 4+ years, actively looking for opportunities to hone my skills as well as help small-scale business owners with solutions to technical problems
Victor Denisov
Developer
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