Tailwind CSS: Styling Dynamically Created HTML

Question

Any one figure out a good way to style auto-generated HTML code with Tailwind CSS?

Example: Using a library like Marked to convert Markdown into HTML, which would then be injected into the page.

The key here, is that you do not know the structure of the auto-generated HTML as the markdown could be in any format created by the author.

Answer 1

npm install @tailwindcss/typography

configure tailwind.config.js plugins:

plugins: [
    require("@tailwindcss/typography")
  ],

use it in component with a special className

  <article className="prose lg:prose-xl">
        <div dangerouslySetInnerHTML={{ __html: dynamicContentHere }} />
      </article>

Answer 2

The only thing you could do is like style all elements of a type adding tailwind classes via javascript like this:

document.querySelectorAll('span').classList.add('text-sm text-gray-500 py-1');

etc