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

Question

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?

ATP · Accepted Answer · 2022-12-04 13:15:20Z

2

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.

answered Dec 4, 2022 at 13:15

ATP

3,2794 gold badges15 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related