Fixing Style Bugs Introduced by Lovable Code Regeneration

Why Lovable regeneration overrides your custom style changes

Lovable's AI builds features by modifying component files. When you ask for a change that touches a component you previously styled, the AI may replace or modify the Tailwind classes you carefully set. This happens because the AI generates the entire component (or large sections of it) fresh, using its own styling defaults rather than preserving your customizations. Another common issue is theme resets. If you customized colors or fonts in Design view > Themes, those changes are stored in CSS variables. But if a prompt causes the AI to modify the theme configuration or regenerate base styles, your customizations may be overwritten. CSS specificity conflicts also arise when the AI adds new styles that compete with existing ones. For example, if you set a card background to bg-blue-50 and the AI adds bg-white to the same element, the last class wins in Tailwind, effectively overriding your custom color.

• The AI regenerates a component and replaces your custom Tailwind classes with its defaults
• A prompt touches the theme configuration and resets custom colors or fonts
• New Tailwind classes are added that override existing custom classes on the same element
• The AI removes or changes CSS variable definitions that your theme depends on
• Visual Edits made through Design view are overwritten by a subsequent Agent Mode prompt

Error messages you might see

Before you start

• A Lovable project where styles broke after an AI code generation
• Access to version history to compare before and after the style change
• Familiarity with Design view > Themes for theme-level customizations

How to fix it

// Custom colors hardcoded in individual components:
<div className="bg-[#1a56db] text-white">
  <h1 className="text-[#e5e7eb]">Dashboard</h1>
</div>
// AI regeneration replaces these with defaults

// Theme-level colors set in Design view > Themes:
<div className="bg-primary text-primary-foreground">
  <h1 className="text-muted-foreground">Dashboard</h1>
</div>
// These reference CSS variables that survive regeneration

// No style rules in AGENTS.md
// AI uses its own styling defaults during regeneration

# AGENTS.md — Style Preservation Rules
## Theme (DO NOT CHANGE):
- Primary color: use 'primary' CSS variable (currently blue-600)
- Background: use 'background' CSS variable (currently white)
- Font: Inter for body, system fonts for headings
- Border radius: rounded-lg (8px) for cards, rounded-md for inputs
## Spacing conventions:
- Page padding: p-6 on mobile, md:p-8 on desktop
- Card padding: p-4
- Gap between elements: gap-4 (16px)
- Section spacing: space-y-8
## NEVER change:
- Do not modify Design view > Themes settings
- Do not replace bg-primary with hardcoded color values
- Do not change the font family
- Preserve all existing className strings unless explicitly asked to change them

// After regeneration: styles are broken
// Not sure which specific classes changed

// Step 1: Scroll up → find last version with correct styles
// Step 2: Click Revert
// Step 3: Re-send prompt with style preservation constraint:
// 'Add the search bar to @src/pages/Dashboard.tsx.
// Do not change any existing className values.
// Do not modify the theme or color scheme.
// Preserve all current spacing and layout.'

// Using Agent Mode to fix a small style issue:
// Prompt: 'Make the card background lighter'
// Risk: AI regenerates the entire card component, changing other styles

// Using Visual Edits instead:
// 1. Click + next to Preview → Design view
// 2. Click Visual Edits tab
// 3. Click the card element
// 4. Change background color directly
// No AI regeneration, no risk of style changes elsewhere

Complete code example

1# Style and Theme Rules
2
3## Design System
4This project uses Design view > Themes for all core styling.
5Do NOT override theme variables with hardcoded values.
6
7## Color Palette (from Theme)
8- Primary: bg-primary, text-primary, border-primary
9- Secondary: bg-secondary, text-secondary
10- Background: bg-background
11- Foreground: text-foreground
12- Muted: bg-muted, text-muted-foreground
13- Destructive: bg-destructive (for errors/warnings)
14
15## Typography
16- Headings: text-2xl font-bold (h1), text-xl font-semibold (h2)
17- Body: text-sm or text-base
18- Muted text: text-muted-foreground
19- Links: text-primary hover:underline
20
21## Spacing
22- Page wrapper: max-w-7xl mx-auto p-6 md:p-8
23- Card: rounded-lg border p-4 or p-6
24- Section gaps: space-y-8 between sections, space-y-4 within sections
25- Element gaps: gap-4 in flex/grid containers
26
27## Component Styling
28- Use shadcn/ui components for all UI elements
29- Use Tailwind utilities for layout and spacing
30- Never use inline styles
31- Never use !important
32
33## PRESERVATION RULES
34- Do not modify existing className strings unless explicitly asked
35- Do not change Design view > Themes settings
36- Do not add new global CSS that could affect existing components
37- Do not change the font family
38- When adding new components, match the existing visual style

Best practices to prevent this

• Use Design view > Themes for all core styling (colors, fonts, spacing) — these are more resilient to AI regeneration
• Add style preservation rules to AGENTS.md listing your design system and what should not change
• Use Visual Edits for small styling adjustments — they do not trigger code regeneration and cost no credits
• Reference theme CSS variables (bg-primary, text-foreground) instead of hardcoded colors in components
• Add constraints to prompts: 'Do not change any existing className values or theme settings'
• Check version history after every code generation to verify styles are intact
• Keep a record of your custom style values (colors, fonts, spacing) outside of Lovable as a reference
• If using custom CSS in src/index.css, add a comment marking which styles are custom to help the AI identify them

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns