Ensuring TailwindCSS Classes Apply Properly in Lovable

Why Tailwind CSS classes do not apply in Lovable projects

Tailwind CSS works by scanning your source files for class names and generating only the CSS for classes it finds. This is called 'purging' — it removes unused CSS to keep the bundle small. The problem is that Tailwind scans files as plain text at build time. If a class name is constructed dynamically at runtime (like `bg-${color}-500`), Tailwind never sees the full class name and does not generate the CSS for it. Another common issue in Lovable projects is class conflicts. When you apply both p-4 and p-8 to the same element, only one can win. Tailwind resolves conflicts by source order in the stylesheet, not by the order in your className string. The cn() utility function (included in all Lovable projects via shadcn/ui) solves this by using tailwind-merge to intelligently resolve conflicts. The content array in tailwind.config.ts tells Tailwind which files to scan. If a component file is outside the scanned paths (for example, in a folder not covered by the glob pattern), its classes will not be generated in the final CSS.

• Dynamic class names — Tailwind cannot detect classes constructed with string interpolation at build time
• Class conflicts — multiple utility classes compete for the same CSS property, and the wrong one wins
• Content array incomplete — tailwind.config.ts does not scan all files that contain Tailwind classes
• Important flag missing — other CSS (from shadcn/ui or custom styles) has higher specificity than Tailwind utilities
• Dark mode class not toggling — dark: variants do not apply because the dark class is not on the html element

Error messages you might see

Before you start

• A Lovable project where Tailwind CSS classes are not applying as expected
• Browser DevTools to inspect which CSS rules are applied to an element
• Access to Dev Mode to edit tailwind.config.ts

How to fix it

// BAD: class conflict — both p-4 and p-8 are applied
<div className={`p-4 ${isLarge ? 'p-8' : ''} bg-white`}>
  Content
</div>

import { cn } from "@/lib/utils";
// GOOD: cn() resolves the conflict — p-8 wins when isLarge is true
<div className={cn("p-4 bg-white", isLarge && "p-8")}>
  Content
</div>

// BAD: Tailwind never sees 'bg-red-500' or 'bg-blue-500'
function Badge({ color }: { color: string }) {
  return <span className={`bg-${color}-500 text-white px-2 py-1 rounded`} />;
}

// GOOD: all class names are complete strings Tailwind can detect
const colorClasses: Record<string, string> = {
  red: "bg-red-500",
  blue: "bg-blue-500",
  green: "bg-green-500",
  yellow: "bg-yellow-500",
};
function Badge({ color }: { color: string }) {
  return (
    <span className={cn(
      "text-white px-2 py-1 rounded",
      colorClasses[color] || "bg-gray-500"
    )} />
  );
}

export default {
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
  theme: { extend: {} },
};

export default {
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
  safelist: [
    // Always include these classes even if not in source files
    "bg-red-500", "bg-blue-500", "bg-green-500", "bg-yellow-500",
    // Pattern: include all bg-{color}-500 classes
    { pattern: /bg-(red|blue|green|yellow|purple)-(100|500|900)/ },
  ],
  theme: { extend: {} },
};

// Tailwind class is overridden by shadcn/ui button styles
<Button className="bg-blue-500">Click me</Button>

import { cn } from "@/lib/utils";
// Use cn() and the important modifier to override component styles
<Button className={cn("!bg-blue-500 hover:!bg-blue-600")}>Click me</Button>

Complete code example

1import { type ClassValue, clsx } from "clsx";
2import { twMerge } from "tailwind-merge";
3
4/**
5 * Combines class names with intelligent conflict resolution.
6 * Uses clsx for conditional logic and tailwind-merge to
7 * resolve Tailwind class conflicts (e.g., p-4 + p-8 = p-8).
8 *
9 * Usage:
10 * cn("base-classes", isActive && "active-classes", className)
11 * cn("p-4 bg-white", isLarge && "p-8") // resolves to "p-8 bg-white"
12 */
13export function cn(...inputs: ClassValue[]) {
14  return twMerge(clsx(inputs));
15}
16
17/**
18 * Type-safe mapping for dynamic Tailwind classes.
19 * Use this instead of string interpolation like `bg-${color}-500`.
20 */
21export const statusColors: Record<string, string> = {
22  active: "bg-green-100 text-green-800",
23  inactive: "bg-gray-100 text-gray-800",
24  pending: "bg-yellow-100 text-yellow-800",
25  error: "bg-red-100 text-red-800",
26} as const;
27
28export const sizeClasses: Record<string, string> = {
29  sm: "text-sm px-2 py-1",
30  md: "text-base px-4 py-2",
31  lg: "text-lg px-6 py-3",
32} as const;

Best practices to prevent this

• Always use the cn() utility from @/lib/utils for conditional classes — it resolves Tailwind conflicts correctly
• Never construct class names with string interpolation (bg-${color}-500) — use a mapping object with complete class strings
• Keep the content array in tailwind.config.ts up to date — ensure it covers all files that contain Tailwind classes
• Use the safelist only as a last resort for truly dynamic classes that cannot be expressed as complete strings in code
• Inspect elements with DevTools when a class does not apply — check the Styles panel for overriding rules
• Use the Tailwind important modifier (!) sparingly to override shadcn/ui component styles
• Test Tailwind classes after building for production — some classes that work in dev may be purged in the production build

Still stuck?

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

Related error patterns