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
- tailwind.config.js content paths don't include component files
- Using arbitrary class names outside content scope
- CSS !important declarations overriding Tailwind utilities
- Tailwind CSS not imported in main.css
- 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.
You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.
Get Help