Import the custom styling of a new project to an existing one

[Axiol]

Hello, I was playing with the new tool to create custom themes. And I wanted to use it in an existing project (nothing custom done in it, a simple dashboard).

So I opened the generated code in v0 and copied the CSS and font class. But nothing changes in my project. Am I missing something ?

[krishparmar22242]

It is exciting to use the new v0 and Theme Generator tools, but moving the styles into an existing project is often more than just a simple "copy-paste." The reason your changes aren't showing up is likely because the CSS variables in your stylesheet aren't being mapped to Tailwind utility classes.

Here is the step-by-step process to ensure your new theme actually applies to your project:

1. Map CSS Variables in tailwind.config.js

Pasting the CSS into globals.css defines the colors (like --primary), but it doesn't tell Tailwind to use them. You must ensure your tailwind.config.js is set up to read these variables.

Check that your theme.extend.colors section looks like this:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // ... repeat for secondary, destructive, etc.
      },
    },
  },
}

• Note: If your v0 code uses OKLCH instead of HSL, make sure your config uses oklch(var(--primary)) instead of hsl(...).

2. Verify @layer base Placement

Ensure that you pasted the new :root and .dark variables inside the @layer base directive in your globals.css. If they are outside this layer, Tailwind might override them with its default styles.

/* globals.css */
@import "tailwindcss"; /* If using Tailwind v4 */

@layer base {
  :root {
    --background: 0 0% 100%;
    --primary: 222.2 47.4% 11.2%;
    /* ... your copied variables ... */
  }

  .dark {
    --background: 222.2 84% 4.9%;
    /* ... your copied dark mode variables ... */
  }
}

3. Register the Font Class

If you copied a font class (e.g., font-sans or a custom class from v0), you must register it in the fontFamily section of your Tailwind config.

// tailwind.config.js
theme: {
  extend: {
    fontFamily: {
      sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
    },
  },
}

Then, make sure the variable (e.g., --font-sans) is applied to your HTML body tag in your root layout.

Sometimes Next.js or Tailwind gets "stuck" on the old configuration.

1. Stop your dev server.
2. Delete the .next folder in your project directory.
3. Restart your server with npm run dev.

If this configuration sync fixes your dashboard styles and brings the v0 look to your project, please consider marking this as the accepted answer so it can help other developers!