Resolving CSS Conflicts in Lovable Components

Why CSS conflicts arise between components in Lovable projects

Lovable projects use Tailwind CSS for utility-based styling and shadcn/ui (built on Radix UI) for pre-built components. These two systems work well together, but conflicts occur when Tailwind utility classes compete with the default styles baked into shadcn/ui components. The root cause is CSS specificity. When you add className="bg-blue-500" to a shadcn/ui Button, the button may still show its default background color because the component's internal styles have equal or higher specificity. Tailwind classes and component defaults are both single-class selectors, so the one defined later in the stylesheet wins. Since shadcn/ui styles are imported after Tailwind's base layer, they often override your custom utilities. The cn() utility function (included in every Lovable project at src/lib/utils.ts) solves this by intelligently merging Tailwind classes. It uses the tailwind-merge library under the hood, which knows that bg-blue-500 and bg-primary are conflicting classes and keeps only the last one. Without cn(), both classes exist in the DOM and the browser picks the winner based on stylesheet order, which is unpredictable.

• Tailwind utility class overridden by shadcn/ui component default styles due to stylesheet order
• Not using cn() to merge custom className with component defaults — both conflicting classes stay in the DOM
• Global CSS in index.css or globals.css overriding component-level Tailwind classes
• Tailwind's dark mode classes conflicting with the shadcn/ui theme system
• Using !important to force styles, which then becomes impossible to override later

Error messages you might see

Before you start

• A Lovable project using the default Tailwind CSS + shadcn/ui stack
• Understanding that Lovable components are in src/components/ui/ and can be customized
• The cn() utility function available at src/lib/utils.ts (included by default in all Lovable projects)

How to fix it

// Custom bg class ignored because component default wins
import { Button } from "@/components/ui/button";
<Button className="bg-red-500 hover:bg-red-600">
  Delete
</Button>
{/* Button still shows the default primary background */}

// Using cn() inside the Button component definition to support overrides
// In src/components/ui/button.tsx:
import { cn } from "@/lib/utils";
const Button = ({ className, variant, ...props }) => {
  return (
    <button
      className={cn(
        buttonVariants({ variant }), // Default styles first
        className // Custom styles last — cn() resolves conflicts
      )}
      {...props}
    />
  );
};
// Usage — now bg-red-500 correctly overrides the default:
<Button className="bg-red-500 hover:bg-red-600">Delete</Button>

// Fighting the default variant with custom classes
<Button className="bg-transparent border border-gray-300 text-gray-700 hover:bg-gray-50">
  Cancel
</Button>
{/* Many conflicting classes needed to override the default variant */}

// Using the outline variant — achieves the same look with one prop
<Button variant="outline">
  Cancel
</Button>
{/* Clean, themeable, no class conflicts */}

/* Manually overriding every component's color */
.custom-button { @apply bg-blue-600; }
.custom-card { @apply border-blue-600; }
.custom-link { @apply text-blue-600; }
/* Inconsistent if you miss one component */

/* Using CSS variables set by the Themes tab */
/* In tailwind.config.ts, primary maps to a CSS variable: */
/* --primary: 220 90% 56%; (set via Design view → Themes) */
/* All components use the same primary automatically: */
<Button>Uses primary</Button>
<Card className="border-primary">Uses primary</Card>
<Link className="text-primary">Uses primary</Link>

/* !important arms race — each override needs more !important */
<div className="bg-white !important">
  <Button className="!bg-red-500 !hover:bg-red-600 !text-white">
    Delete
  </Button>
</div>
{/* Fragile — breaks as soon as another style uses !important */}

/* Proper fix — use cn() and component variants */
<div className="bg-background">
  <Button variant="destructive">
    Delete
  </Button>
</div>
{/* Uses the theme system — no !important needed */}

Complete code example

1import { cn } from "@/lib/utils";
2import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
3import { Button } from "@/components/ui/button";
4import { Badge } from "@/components/ui/badge";
5
6interface StyledCardProps {
7  title: string;
8  description: string;
9  status: "active" | "inactive" | "pending";
10  className?: string;
11  onAction?: () => void;
12}
13
14// Example of conflict-free styling with cn() and variants
15const StyledCard = ({ title, description, status, className, onAction }: StyledCardProps) => {
16  // Map status to badge variants — no custom CSS needed
17  const badgeVariant = {
18    active: "default" as const,
19    inactive: "secondary" as const,
20    pending: "outline" as const,
21  }[status];
22
23  return (
24    <Card className={cn(
25      "transition-shadow hover:shadow-md", // Default styles
26      status === "inactive" && "opacity-60",  // Conditional styles
27      className // Allow parent to override — cn() resolves conflicts
28    )}>
29      <CardHeader className="flex flex-row items-center justify-between">
30        <CardTitle className="text-lg">{title}</CardTitle>
31        <Badge variant={badgeVariant}>{status}</Badge>
32      </CardHeader>
33      <CardContent className="space-y-4">
34        <p className="text-muted-foreground">{description}</p>
35        {onAction && (
36          <Button
37            variant={status === "active" ? "default" : "outline"}
38            size="sm"
39            onClick={onAction}
40          >
41            {status === "active" ? "Deactivate" : "Activate"}
42          </Button>
43        )}
44      </CardContent>
45    </Card>
46  );
47};
48
49export default StyledCard;

Best practices to prevent this

• Always use cn() from @/lib/utils to merge Tailwind classes — it resolves conflicts using tailwind-merge
• Use shadcn/ui component variants (variant='destructive', variant='outline') before writing custom CSS overrides
• Use Design view → Themes tab for global color, font, and spacing changes instead of per-component overrides
• Never use !important in Tailwind classes — it creates an escalating specificity war that is hard to undo
• Pass className as the last argument to cn() so custom classes override defaults, not the other way around
• When customizing shadcn/ui components in src/components/ui/, always spread the className prop through cn()
• Check browser DevTools → Computed tab to see which CSS rule is actually winning when a style conflict occurs
• Keep global CSS in index.css or globals.css minimal — prefer Tailwind utilities and theme variables for all styling

Still stuck?

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

Related error patterns