Custom styles for "tooltip-container"

[neznayer]

Describe the bug
Couldn't add custom styles to tooltip-container with tailwind. The styles is always reset to some default ones. In this particular case - border-radius is not 16px, but 3px even though I set rounded-[16px] after tooltip-container.

To Reproduce
Steps to reproduce the behavior:

{visible && (
                <div
                    ref={setTooltipRef}
                    {...getTooltipProps({
                        className:
                            'tooltip-container rounded-[16px]'
                    })}
                >
                    <div
                        {...getArrowProps({
                            className: 'tooltip-arrow',
                        })}
                    />
                    <h3 className='text-color-main'>{col}</h3>
                    <div className='font-normal text-left w-full h-full'>
                        {children}
                    </div>
                </div>
            )}

Expected behavior
tooltip-container to have styles I defined by Tailwind.

[denisborovikov]

I expect the issue to be in the order of the CSS files. Tailwind CSS needs to be imported after the tooltip CSS. Otherwise, the last one is applied if styles have the same specificity.

.rounded-[16px]{
  border-radius: 16px
}

.tooltip-container {
  border-radius: 3px
}

// 3px