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.

Matthew Jordan 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. Taufan Taufan I’m a product-focused engineer and tech leader who builds scalable systems and turns ideas into production-ready platforms. Over the past years, I’ve worked across startups and fast-moving teams, leading backend architecture, improving system reliability, and shipping products used by thousands of users. My strength is not just writing code — but connecting product vision, technical execution, and business impact. Jared Hasson Jared Hasson Full time lead founding dev at a cyber security saas startup, with 10 yoe and a bachelor's in CS. Building & debugging software products is what I've spent my time on for forever 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. Dor Yaloz Dor Yaloz SW engineer with 6+ years of experience, I worked with React/Node/Python did projects with React+Capacitor.js for ios Supabase expert Omar Faruk Omar Faruk As a Product Engineer at Klasio, I contributed to end-to-end product development, focusing on scalability, performance, and user experience. My work spanned building and refining core features, developing dynamic website templates, integrating secure and reliable payment gateways, and optimizing the overall system architecture. I played a key role in creating a scalable and maintainable platform to support educators and learners globally. I'm enthusiastic about embracing new challenges and making meaningful contributions. Rudra Bhikadiya Rudra Bhikadiya I build and fix web apps across Next.js, Node.js, and DBs. Comfortable jumping into messy code, broken APIs, and mysterious bugs. If your project works in theory but not in reality, I help close that gap. rayush33 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 Victor Denisov Developer Antriksh Narang Antriksh Narang 5 years+ Experienced Dev (Specially in Web Development), can help in python, javascript, react, next.js and full stack web dev technologies.

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