I’m using to different fonts in my website and both has different line-height, I’m using one font for headings like Title component from mantine and other with Text component from mantine. Now issues is when i use classes like text-sm or text-lg then line hight from tailwind will be applied and i do not want that.

I can not directly modify tailwind config like xs:[12px,16px] because i’m using multiple fonts and all have different line height. This should also work for custom font-size in tailwind config.

Right now i’m following this method

.bbr-title {
    &.text-xs {
      line-height: normal !important;
    }

    &.text-sm {
      line-height: normal !important;
    }
}

Here bbr-title directly apply to Title component from mantine UI but issue is when i write something like text-xs lg:text-sm then line-height of xs is applied even in lg screen.