Why do we add the hsl() in the tailwind config and not in the global.css file?

[rachelslurs]

I'm curious because I'd like my editor to better render the colors in global.css at a glance instead of having to know the difference between 0 0% 0% and 0 0% 100% off hand. I imagine there's a good reason, but I can't think of it on first glance.

Basically wondering why in the tailwind config it looks like this: border: 'hsl(var(--border))',

Instead of this: border: 'var(--border)',

This way when opening the global.css, then I could see at a glance the colors like this:

Instead of this:

Thank you to anyone who can share more about why this is in advance!

Rachel

[mrzachnugent]

Hey @rachelslurs, it allows the opacity modifier to work (ex: bg-foreground/50)

Reference: https://tailwindcss.com/docs/customizing-colors#using-css-variables

[rachelslurs]

ah! doh! thank you! this helps. is there any way to keep those values in sync with what goes in your constants file? or is it just manual?