v0 components have no colors in my Next 14 app, bg-background does nothing

Solved · 1501 views · asked 3 months ago by tessa_k · edited

Older Next 14 app with Tailwind 3 and a tailwind.config.ts. Pulled a component from v0. Layout is fine but everything is transparent, borders missing. In devtools I see the class bg-background on the div but no CSS rule for it.

v0's globals.css has stuff like this which I pasted in:

@import "tailwindcss";

@theme inline {
  --color-background: var(--background);
  --color-card: var(--card);
}

What I’ve tried

Pasted v0's whole globals.css over mine. Restarted dev server. Also tried adding the colors to tailwind.config.ts manually but I don't know the format.

Comment

Which Tailwind version is in your package.json? aiko_n 3 months ago · edited

3.4.1 tessa_k 3 months ago · edited

3 answers

Marked as helpful by the asker

aiko_n3 months ago · edited

v0 generates for Tailwind v4, where theme colors are defined in CSS with @theme. Your app runs v3, which ignores @theme and only knows colors from tailwind.config.ts.

Option A, stay on v3: keep the :root { --background: ... } variables from v0 (convert them if they're oklch and you need old browser support, otherwise fine), remove the @import "tailwindcss" and @theme block, restore the @tailwind base; @tailwind components; @tailwind utilities; lines, and map them in the config:

theme: {
  extend: {
    colors: {
      background: "var(--background)",
      foreground: "var(--foreground)",
      card: { DEFAULT: "var(--card)", foreground: "var(--card-foreground)" },
      border: "var(--border)",
      primary: { DEFAULT: "var(--primary)", foreground: "var(--primary-foreground)" },
    },
  },
},

Option B: upgrade to v4 with npx @tailwindcss/upgrade. Worth it long term, but on an older app with plugins do it on a branch.

Comment

went with A for now, colors are back. Will do the upgrade on a branch when I have a quiet week tessa_k 3 months ago · edited

Heads up that older shadcn setups stored the vars as HSL parts (--background: 0 0% 100%) and wrapped them as hsl(var(--background)). If you mix old and new components, keep one format. dev_ana 3 months ago · edited

mei_lin3 months ago · edited

If the upgrade tool is scary: you can also ask v0 to "generate for Tailwind v3 with a tailwind.config.ts". It does it reasonably well, saves the conversion.

Comment

kofi_mensah3 months ago · edited

I went the other way: ran the v4 upgrade tool on a small app and it took 10 minutes. Depends a lot on which plugins you use.

Comment

Keyboard shortcuts

v0 components have no colors in my Next 14 app, bg-background does nothing

What I’ve tried

3 answers

Your answer

v0 components have no colors in my Next 14 app, bg-background does nothing

What I’ve tried

3 answers

Related

Your answer