CSS Changes Not Showing in Lovable
Quick Answer
Browser cache, conflicting Tailwind classes, or CSS specificity issues where component library defaults override your changes. Start with "Hard refresh your browser" before making broader code changes.
You're in the right place if...
- !Changed a class but nothing looks different
- !Styling works in editor but not in preview
- !Colors or sizes don't match what you set
Why this happens
Browser cache, conflicting Tailwind classes, or CSS specificity issues where component library defaults override your changes.
Fix
Hard refresh your browser
Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows). This clears the cached CSS.
Tell Lovable to debug
If hard refresh doesn't work:
Copy this prompt
CSS changes are not being applied visually. Please check for: 1. Conflicting Tailwind classes 2. CSS specificity issues 3. Classes being overridden by component library defaults Fix the styling for [specific element].
Prevent this next time
Use Tailwind's !important modifier (!) when overriding component library defaults. Example: !bg-blue-500 forces the background color.
Frequently Asked Questions
Most likely a conflicting class. Tailwind applies the last matching class, but component libraries may use inline styles that override everything.
No. Stick with Tailwind classes. If a class isn't working, use the ! prefix to force it: !text-blue-500.
Related fixes
Weekly Newsletter
Get next week's fix before you need it.
Join developers getting weekly vibe coding tips, error fixes, and tool updates.
Subscribe on Substack →