Styling dynamically added children nodes added to parent div in tailwind

Question

I am trying to migrate my site stacktips.com from Bootstrap to Tailwind CSS. At first sight, it looked easy and I was able to replace all my static HTML with tailwind classes. I am now stuck and do not understand how to style the dynamically added HTML.

Let's say in the following example, everything under <article> element is dynamically created content and I do not have control over adding the CSS classes directly on those elements.

<article class="article-content">
    <p>some text</p>
    <h2>Heading 2</h2>
    <p>some text</p>
    <pre>some text</pre>
</article>

Need some help adding the styling to p, h2, and pre tags under article-content div. These styles need to be different from the global styles.

Answer 1

You could consider using the @tailwindcss/typography Tailwind plugin, as it is described:

The official Tailwind CSS Typography plugin provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don’t control, like HTML rendered from Markdown, or pulled from a CMS.

Otherwise, you can use arbitrary variants, like:

<article class="article-content [&_p]:text-red-500">

Of which you could refactor to variants in a Tailwind plugin.