Lovable ui

Tailwind CSS Classes Not Applying or Conflicting

Tailwind classes are written correctly but styles don't apply to elements. Custom CSS conflicts with Tailwind. Class purging removes needed styles or adds unwanted ones.

Tailwind requires proper configuration of content paths for class scanning. Conflicts occur when CSS specificity issues override Tailwind utilities.

Common Causes

  1. tailwind.config.js content paths don't include component files
  2. Using arbitrary class names outside content scope
  3. CSS !important declarations overriding Tailwind utilities
  4. Tailwind CSS not imported in main.css
  5. Template files not scanned due to wrong file extension

How to Fix It

Verify tailwind.config.js includes all template files:

export default {
  content: [
    './index.html',
    './src/**/*.{js,jsx,ts,tsx}'
  ]
}

Import in main.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Avoid !important in custom CSS that conflicts with utilities.

Real developers can help you.

Kingsley Omage Kingsley Omage Fullstack software engineer passionate about AI Agents, blockchain, LLMs. Richard McSorley 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. Meïr Ankri Meïr Ankri Full-stack developer specializing in React / Next.js / Node.js with 6+ years of experience. I've worked across various sectors including automotive (Reezocar/Société Générale), healthcare (Medical Link SaaS), and e-commerce (Glasman). I build web apps end-to-end, from architecture to production, with a focus on scalability, performance, and code quality. I also mentor junior developers and contribute to technical decisions and code reviews. Stanislav Prigodich Stanislav Prigodich 15+ years building iOS and web apps at startups and enterprise companies. I want to use that experience to help builders ship real products - when something breaks, I'm here to fix it. Costea Adrian Costea Adrian Embedded Engineer specilizing in perception systems. Latest project was a adas camera calibration system. David Olverson David Olverson Solo dev shipping production apps with AI-assisted development. I specialize in rescuing broken Lovable/Bolt/Cursor builds and taking them to production. 10+ apps shipped including SaaS CRMs, gaming platforms, real estate tools, and Discord bots. Stack: Next.js 16, TypeScript, Tailwind CSS, FastAPI, PostgreSQL, Prisma. I use Claude Code with 50+ custom skills for rapid delivery. Average turnaround: 2-4 weeks from broken prototype to production. zipking zipking I am a technologist and product builder dedicated to creating high-impact solutions at the intersection of AI and specialized markets. Currently, I am focused on PropScan (EstateGuard), an AI-driven SaaS platform tailored for the Japanese real estate industry, and exploring the potential of Archify. As an INFJ-T, I approach development with a "systems-thinking" mindset—balancing technical precision with a deep understanding of user needs. I particularly enjoy the challenge of architecting Vertical AI SaaS and optimizing Small Language Models (SLMs) to solve specific, real-world business problems. Whether I'm in a CTO-level leadership role or hands-on with the code, I thrive on building tools that turn complex data into actionable value. BurnHavoc BurnHavoc Been around fixing other peoples code for 20 years. AUXLE AUXLE I am a Full Stack Developer experienced in building Websites, Web apps and Cross Platform Mobile Apps for Startups and Companies. Anthony Akpan Anthony Akpan Developer with 8 years of experience building softwares fro startups

You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.

Get Help

Frequently Asked Questions

Why are Tailwind classes stripped in production?

Classes not in content paths are purged. Ensure all component files are in tailwind.config.js content array.

How do I use arbitrary values in Tailwind?

Use bracket notation: w-[500px], gap-[3px]. These must be in content files or template strings won't work in production.

Related Lovable Issues

Can't fix it yourself?
Real developers can help.

You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.

Get Help