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.

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. Krishna Sai Kuncha 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 : ) BurnHavoc BurnHavoc Been around fixing other peoples code for 20 years. 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. AUXLE AUXLE I am a Full Stack Developer experienced in building Websites, Web apps and Cross Platform Mobile Apps for Startups and Companies. 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. Jen Jacobsen Jen Jacobsen I’m a Full-Stack Developer with over 10 years of experience building modern web and mobile applications. I enjoy working across the full product lifecycle — turning ideas into real, well-built products that are intuitive for users and scalable for businesses. I particularly enjoy building mobile apps, modern web platforms, and solving complex technical problems in a way that keeps systems clean, reliable, and easy to maintain. Prakash Prajapati Prakash Prajapati I’m a Senior Python Developer specializing in building secure, scalable, and highly available systems. I work primarily with Python, Django, FastAPI, Docker, PostgreSQL, and modern AI tooling such as PydanticAI, focusing on clean architecture, strong design principles, and reliable DevOps practices. I enjoy solving complex engineering problems and designing systems that are maintainable, resilient, and built to scale. Matthew Butler Matthew Butler Systems Development Engineer @ Amazon Web Services hanson1014 hanson1014 Full-stack developer experienced in fixing and deploying AI-generated apps from Lovable, Bolt.new, Cursor, and Replit. I specialize in debugging Supabase integration issues (auth flows, RLS policies, database connections), fixing broken deployments, resolving routing/blank screen problems, and cleaning up messy React/Vite codebases. I also build production apps with the Claude API and have shipped a Mac desktop dev tool (Nexterm from scratch. Based in Hong Kong, fast turnaround.

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