Tailwind css doesn't work with customized handle

[Jason Zhang]

Thanks for opening an issue!

• Bug
• Feature Request
• Question

Problem Report

When using tailwind CSS with custom handle, the CSS doesn't work, but it works if I place it as a plain CSS.

System Info

Node Version: v22.2.0
react-resizable version: ^3.0.5
react version: ^18.2.0
Browser: Chrome Version 125.0.6422.112 (Official Build) (64-bit)
OS: Windows WSL2

Reproduction

Consider this.

<div className="flex h-full">
   <ResizableBox
        width={300}
        axis="x"
        resizeHandles={["e"]}
        handle={(handleAxis, ref) => (
          <DivResizeHandle
             className={`handle-${handleAxis} w-3 h-full flex flex-col bg-black cursor-move `}
             innerRef={ref}
          />
        )}
        onResize={handleLeftResize}
        minConstraints={[100, Infinity]}
        maxConstraints={[600, Infinity]}
        className="h-full"
      >
       <div> Left Component </div>
  </ResizableBox>
  <div className="flex-1 border-l-2">Right Component</div>
</div>


// DivResizeHandle
const DivResizeHandle = React.forwardRef(
  (props) => {
    return (
     <div {...props} className={props.className} ref={props.innerRef}>
        move me
     </div>
    );
  }
);

The above example will not display the DivResizeHandle, but if you don't use the tailwind CSS in its className, and use the same CSS attributes from a plain CSS file, it would work.