How to apply classes to dynamically generated content?

Question

In tailwind, there is a feature (which I find very annoying at times) called preflight that turns most of the HTML elements to appear like normal text. And the documentation says that if you want your lists to remain unchanged, you can just do the following:

<ul className="list-disc list-inside">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

But the thing is, I have dynamically generated content and I can't find a way to apply those to it. Does anybody know how this can be done? I tried wrapping it in a div with the classes but no luck.

<div className="list-disc list-inside">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

Answer 1

With dynamically generated content, you can inject CSS styles using Javascript/jQuery. Please note that the following code has to run after the content is dynamically generated, so it overrides the default styles. Here is a simple example that sets the color property for li elements to red.

$('li').css('color','red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-disc list-inside">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Answer 2

You can make use of the @layer directive as shown in the documentation: https://tailwindcss.com/docs/functions-and-directives.

@layer base {
  ul {
    @apply list-disc list-inside;
  }
}