How to use css variables defined in css file in UI

[MariuzM]

Description

I have defined some css variables in css file that is located in app/styles/main.css location. I can use these in tw like so bg-[--primary]

but how do i use this with UI lib ? for example using with Card component?

:root {
    --bg: #f5f6ce;
    --primary: #2ab4f6;
    --r-sm: 5px;
}

[lovrozagar]

Hi Mariuz,

You can reference your CSS variables in Tailwind CSS by using the var() function. You would write the class like this:

bg-[var(--primary)]

This way, the Card component will use the --primary variable defined in your CSS file for the background color. Just make sure your CSS variables are defined correctly and the styles are applied as expected!

Let me know if you have any further questions!

[MariuzM]

Thank you please help i want to understand how this works, my main goal is to use colors that have defined in css root

But I'm finding confusion with this part now

This works

If i add 2 to color name because this will be invalid then it start using my css primary which is blue

But now if i remove color prop then it goes back to green which its nuxt/ui default color

Why is that?

This is my setup, also I'm on Nuxt v4

[lovrozagar]

This could be 2 different issues, wrong tailwind syntax and styling specificity or just one of them. Example 2 is wrong from the syntax POV but i guess the color result is what you want event though this seems to be accidental.

For starters, try to remove the color property and write the class with the var function with referencing the variable.

This should work for primary color:

Hello

In case it does not try this:

Hello

Let me know if this helped.

[lovrozagar]

Github formatted the syntax, here it is:

'Hello'

'Hello'

[lovrozagar]

[MariuzM]

Hm sorry I'm confused so just adding ! should fix the problem? what is ! ?

[MariuzM]

But another thing I'm confused is why when i add my colors why its not using the default one?

I'm seriously confused by this library so much faff needs to be done to get it working with custom stuff. It does look nice but damn such a pain to use it never in my life had a lib so complex like this to customize

[MariuzM]

Yes this worked

But now my second question lets say there is more complex component how do i change more of its inner UI?

is ! like !important ? i guess its nice that it fixed my problem but i feel its a workaround, lib should not be this complicated to work with

[lovrozagar]

Yes ! means important. Okay now that we solved the syntax we need to solve the specificity.

Basically there is an easy way to do this for tailwind using this helper: https://github.com/ccxdev/cn-func The "cn" helper is passed to the class property and then classes are passed inside the helper.

That way always the classes passed after will override the ones before and there should never be any specificity problems.

Let me know if you need more help.

[lovrozagar]

Hi MariuzM, I hope the answer above helped you. If you need further help let me know,

Otherwise, please mark the answer as accepted.

Thanks.

[MariuzM]

I'm not really a fan that i need to use ! to override the style. feels like this is after thought on the UI lib. It should just make sense any styles i pass should already override the existing ones by default

[lovrozagar]

Hi @MariuzM ,

If you use the cn helper in that case there is no need to ever use ! important for specificity. Before we were only using it to see if that was the issue.

Meaning that if you do something like

const className = cn("bg-red-500", "bg-blue-500")

Blue color will be used as the helper will always correctly override previos tailwind classes with the new ones being passed after.

Let me know if this helps.