TailwindCss styles do not work on Components inside Chakra UI modal

Question

I am able to add custom tailwind stylings on ChakraUi component but those same stylings on the same component does not work inside chakra UI Modal. Can anybody tell me why and provide me with a solution? example-

<Heading  className='mb-2 font-medium text-base text-grey'>
    Email
</Heading>
<Input
     placeholder='Enter your Full Name'
     className='font-medium focus:outline-none text-textGrey focus:text-activeText'
/>

PS- I have already marked tailwind stylings as important in tailwind.config by adding- important: '#app'

Answer 1

Chakra renders each modal in a ChakraPortal component. This component is appended to the root of the body, which ends up being a sibling to your root node, rather than nested within it. Tailwind nests all of it's styles under a #app prefix, which the portal element does not fall under, so it has no tailwind styles applied to it. It's frustrating, and I'm still trying to find a way to universally fix this issue without defining a portal manually each time within the #app node's hierarchy.