CSS styles randomly fail to load in the Lovable preview iframe. Custom theme colors revert to browser defaults (white backgrounds, invisible text). The issue is intermittent - sometimes fixes itself after a few seconds or navigation.
Details:
Tailwind CSS variables (defined in index.css) occasionally don’t apply
Text becomes invisible, backgrounds show default white instead of custom dark theme
Production build works perfectly - issue is isolated to the Lovable preview environment
No code changes were made when the issue started appearing
Console shows: cdn.tailwindcss.com should not be used in production (Lovable-injected)
Workarounds tried:
Hard refresh (sometimes helps)
Navigating between routes (sometimes helps)
Opening preview in new tab (sometimes helps)
Expected: Preview should consistently reflect the same styling as production.
Environment: React + Vite + Tailwind CSS + CSS custom properties for theming
Seems like an internal issue with Lovable, they are aware of it. The hard refresh is a good option