Custom Pallets

[trade74]

Hi,

I am loving this repo btw.

The reason for my post is to try to get a better understanding of how custom colour pallets work.
I can not get even the zinc option to work with the simple config.
and the only way to get the colours is to add it to the css file, which I dont want to do.

Can you maybe add a bit more explanation to how to get this working.

I have tried the -i switch but still no joy

Thank you

[sveltecult]

Hello, without a sample code from your end, I won't be able to know the problem and help you. But, here's a sample tailwind.config.js file and I hope you find this useful.

import franken from "franken-ui/shadcn-ui/preset-quick";

/** @type {import('tailwindcss').Config} */
export default {
  presets: [
    franken({
      palette: {
        ":root": {
          "--background": "351 100% 95%",
          "--foreground": "351 5% 0%",
          "--card": "351 50% 90%",
          "--card-foreground": "351 5% 10%",
          "--popover": "351 100% 95%",
          "--popover-foreground": "351 100% 0%",
          "--primary": "351 60.5% 46.7%",
          "--primary-foreground": "0 0% 100%",
          "--secondary": "351 30% 70%",
          "--secondary-foreground": "0 0% 0%",
          "--muted": "313 30% 85%",
          "--muted-foreground": "351 5% 35%",
          "--accent": "313 30% 80%",
          "--accent-foreground": "351 5% 10%",
          "--destructive": "0 100% 30%",
          "--destructive-foreground": "351 5% 90%",
          "--border": "351 30% 50%",
          "--input": "351 30% 18%",
          "--ring": "351 60.5% 46.7%",
        },
        ".dark": {
          "--background": "351 50% 5%",
          "--foreground": "351 5% 90%",
          "--card": "351 50% 0%",
          "--card-foreground": "351 5% 90%",
          "--popover": "351 50% 5%",
          "--popover-foreground": "351 5% 90%",
          "--primary": "351 60.5% 46.7%",
          "--primary-foreground": "0 0% 100%",
          "--secondary": "351 30% 10%",
          "--secondary-foreground": "0 0% 100%",
          "--muted": "313 30% 15%",
          "--muted-foreground": "351 5% 60%",
          "--accent": "313 30% 15%",
          "--accent-foreground": "351 5% 90%",
          "--destructive": "0 100% 30%",
          "--destructive-foreground": "351 5% 90%",
          "--border": "351 30% 18%",
          "--input": "351 30% 18%",
          "--ring": "351 60.5% 46.7%",
        },
      },
    }),
  ],
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  safelist: [
    {
      pattern: /^uk-/,
    },
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

[trade74]

Thank you, my issue was the

import "css/app.css";

was missing from the frontmatter