Theme Color doesn't highlight in the CSS file.

[AbdullahKhan780]

You should wrap hsl() color function inside the global CSS file instead of wrapping it in tailwind.config.ts. Because VS code doesn't highlight the color. It will help the users to easily modify the color theme.

[lloydrichards]

CSS variables must be defined without color space function. See the Tailwind CSS documentation for more information.

There is a note in the Theme page about why you shouldn't use CSS color namespaces since it will prevent tailwind from adding alpha values. This kind of depends on your project, but several of the hover and focus effects in shadcn/ui are using something like bg-primary/80 which won't work with the hsl() in the css

[AbdullahKhan780]

Thank you @lloydrichards, for the prompt response!