TailwindCSS: Using a ref to calculate width using an arbitrary value

user_18509737 0
Viewed 825

I have a div that is absolute and should take the full width of the page up to the md breakpoint. The width of div from the md breakpoint upward, should also be the full width of the page minus the width of a sidebar navigation menu that's on the left.

My issue is that since I'm using an ref in an Tailwind class instead of a hardcoded value the JIT compiler isn't applying the md:w-[calc(100%-${sidebarRef.current.clientWidth}px)].

What would be the correct way to implement this?

<div
  className={`absolute top-0 right-0 w-full h-full md:w-[calc(100%-${sidebarRef.current.clientWidth}px)]`}>
    // Content
</div>
tailwind-css reactjs css
2 Answers

You can compute the value outside the class decoration.

render() {
    let divWidth = this.myRef.current ? this.sideBarRef.current.clientWidth : 0;
    return (
        <div
            className={`absolute top-0 right-0 w-full h-full md:w-[calc(100%-${divWidth}px)]`}>
        </div>
    )
  }
}
user_46884130

Tailwind doesn't handle dynamic classes. One solution might be to use a CSS variable in your class list and then set the value using JS. Something like:

render() {
  return (
    <style>
      :root {
        --content-width: calc({`100%-${sidebarRef.current.clientWidth}px`});
      }
    </style>

    <div class="absolute top-0 right-0 w-full h-full md:w-[var(--content-width)] bg-red-50">
       Content
    </div>
  )
}

Working example (in straight HTML): https://play.tailwindcss.com/xqiep4ObPt - resize by moving the partition.

user_2874760
Related