Css variable vs tailwind utility classes

[adarshaacharya]

I'm quite confused on opting between css variable or tailwind utility classes for theming, what's the actual difference between those two on the way how we utilize in classnames.

• Can we not use tailwind color palette if we use css variable ?

https://ui.shadcn.com/docs/theming

[ezeparziale]

The diference is that in css variables when you add a new component it will create using bg-background and foreground.
Try setting "cssVariables": true in your components.json and add again one component

[nikolaischunk]

I am also rather confused on what exactly the differences are.

[itsidleboy]

me too, I want to use Tailwindcss.

[dustinkeeton]

TLDR; You're still using Tailwind regardless, maybe try without first and reinstall with `cssVariables` if you want to brew up a dynamic theme system.

Just jumping in here, sorry if it's stale thread.

It's just a matter of preference. The question with these things is usually along the lines of "how abstracted do you want your app design to be?"

TailwindCSS is refreshing for developers coming from stuff like Styled Components, as it kind of just gets back to writing things expressively. Using css variables would still allow anything that tailwind allows, but by using them you're in effect asserting an extra and opinionated set of variables to control the color palette of your theme.

This is kind of already how tailwind handles theme. As in, you'd likely build this approach yourself if you were interested in a dynamic theming system (not just for colors, but for stuff like margin and font sizes as well). Using the shadcn css variables approach is a matter of convenience where you're taking on their extension of the base tailwind theme.

That said, sometimes it's useful to avoid stacking external preferences until you have your own. These things can get messy if you don't learn to work within their boundaries. A themeing system is only as good as how strictly it's adhered to, and how well the variable set describes the your app's aesthetics.