Error: The tweakcn's live theme preview script could not be found. Please make sure the script is included in the website's source code and try again.

[akamalov]

Greetings,

I am a bit lost. I don't believe this is an error, but I am wondering if anyone could point me to a right direction. I am using https://tweakcn.com/editor/theme?tab=typography&p=custom and having point it to my localhost:

However, I am not getting live preview of the style change. Instead, I am getting an error:

The tweakcn's live theme preview script could not be found. Please make sure the script is included in the website's source code and try again.

Am I supposed to download a script and placed it somewhere in my project ? I cannot find any guideline or reference (perhaps I am not looking at right places?)

Thanks in advance!!

[jnsahaj]

Hi, I'm assuming you followed these steps?

If it's still not working, what browser are you on?

[akamalov]

Thank you so much for responding @jnsahaj. I did not see this snippet being part of the README.md. Can you point me to where the instructions are? I am using Chrome (latest).

[jnsahaj]

Hi, no worries. I'll improve the error message.

You should see the instructions if you click the "x" button near the URL bar (to reset it)

[akamalov]

Thanks a metric ton @jnsahaj . I implemented the change and error has gone away. However, it is failing to render the changes. for instance, I click on the style to select "Amethyst Haze", but it is not changing in the render. Again, I apologize for asking too many questions. I am new to tweakcn.

[jnsahaj]

Was your website built with shadcn? Can you share your globals.css / index.css file?

The issue might likely be that your variables aren't configured / used correctly

I would recommend setting up a brand new project with shadcn, seeing if it works with this preview (which it should) and then figuring out what might be causing the problem.

Happy to dig in further

[jnsahaj]

On further thought, if I had to guess the problem, it might be that you're using tailwind v3, and might have the colors defined like this in your config:

primary: hsl(var(--primary))

The hsl() might be causing the issues. If this is the case, see tweakcn's exported code to fix that

[akamalov]

You're awesome. Here is my global.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

...and yes, you' right, I am using Tailwindcss v3.4.17. So, Tailwind CSS v3 is not supported for the live preview?

Thanks again!!!

[jnsahaj]

No, the preview works with twv3.
However, if you see your tailwind.config.ts, you'll see variables wrapped with hsl()

Tweakcn works with other color formats which can cause issues.

You can check out the tweakcn's exported tailwind.config.ts for twv3 and oklch format. That should work.

I'll improve the docs around this as well

[akamalov]

Thanks again @jnsahaj . Last question, I promise I'll shut up. Is this how I get TweakCN exported code for Tailwind CSS v3?