Stack Exchange
Styling(tailwind/SCSS stylesheet) not getting applied to dynamically inserted HTML in React
I have a React App which uses typescript, scss & tailwind. Tailwind works fine and so does Sass.
The problem comes when I try to insert HTML from the useEffect hook into a div.
HTML:
<main className='mx-20 mt-12 text-gray-600'>
    <div ref={mdContainerRef}></div>
</main>

useEffect & other related code:
    const mdContainerRef = useRef<null | HTMLDivElement>(null);

    useEffect(() => {
            if (mdContainerRef.current) {
                mdContainerRef.current.innerHTML = '<p className="text-8xl bg-green-600">Test</p>';
            }

            setArticle(data);
        })();
    }, [slug, mdContainerRef]);

The tailwind classes work on the other content like the render HTML(returned from function, eg: main element).
I've checked the devtools on chrome, there's no sign of the tailwind styles being applied(inline styling works though.)
Image of the devtools:

Let me know if you need any other details, thanks in advance!!!

You inserting html element outside of react ecosystem, so you need to use class instead of className
mdContainerRef.current.innerHTML = '<p class="text-8xl bg-green-600">Test</p>';

