Apply CSS class generated HTML element

[seb-jean]

Hi,

I would like to know how to apply a CSS class on a generated HTML element.

I explain to you:

I use markdown_to_html filter Twig.
markdown_to_html convert markdown to HTML.

<div class="sm:divide-y sm:divide-gray-200 space-y-2 sm:space-y-4">
    <div>{{ post.content|markdown_to_html|raw }}</div>
</div>

The generated content is as follows:

<div class="sm:divide-y sm:divide-gray-200 space-y-2 sm:space-y-4">
    <div>
        <p>Dolores autem molestiae sit doloribus ex ut eveniet occaecati unde.</p>
        <ul>
            <li>Nobis et rerum quam unde.</li>
            <li>Dicta veniam architecto quod rerum nobis.</li>
            <li>Inventore quaerat quis aut excepturi dolor ea.</li>
        </ul>
    </div>
</div>

I would like to add 2 CSS classes to the HTML element <ul> : list-inside and list-disc.

Do I have to create a component like the following?

<div class="sm:divide-y sm:divide-gray-200 space-y-2 sm:space-y-4">
    <div class="post-content">{{ post.content|markdown_to_html|raw }}</div>
</div>

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .post-content ul {
    @apply list-inside list-disc;
  }
}

What is the good practice?

Thanks ;)

[adamwathan]

Yep that's the recommended approach! It's how our official typography plugin works for example.

[seb-jean]

Thank you for your answer @adamwathan !