CODEWITHSUNDEEP
csstailwind-css
John
John

Reputation: 11901

How do I reference CSS variable in Tailwind to define a custom class?

I want to define a variable in a CSS file like this:

:root {
    --sidebar-width: 56;
}

I'd like to now refer to that in a component to define that component's width:

<div className="w-[var(--sidebar-width)]">
   <MySidebar>
</div>

This doesn't work. What I'm trying to achieve is to add the w-56 class to that component and to do so as a variable so that I can refer to that variable in several places. Is this possible and if so, how do I specify this?

Upvotes: 2

Views: 1572

Answers (1)

ATP
ATP

Reputation: 3249

I'm pretty sure it's impossible.
Just do this instead:

:root {
    --sidebar-width: 56;
}

<div className="w-[calc(4px*var(--sidebar-width)]">
   <MySidebar>
</div>

1 tailwind unit is 4px.

Upvotes: 2

Related Questions