Django - Wagtail: How to add classes to generated HTML elements from RichTextField

Question

Using Wagtail 2.16.1, I have a BlogPage model that contains a body field which is a RichTextField.

When I put {{ page.body|richtext }} into the template, the HTML that is rendered contains various html elements, as expected. I'd like to specify (tailwind) classes for these elements.

E.g. every <p> element in a richtextfield should have <p class="mx-2 my-3">, h2 elements should have <h2 class="mt-5">, etc.

John · Accepted Answer · 2022-02-18T16:54:42.917

One approach is to wrap the {{ page.body|richtext }} tag in a parent div with some particular class like "wagtail-richtext", and then use CSS selectors to apply particular styles to <p> elements with the wagtail-richtext parent.

I don't know if there is another method that avoids writing new CSS classes.

This example below is for adding tailwind classes. If you wanted normal css without tailwind, remove anything beginning with an @.

template:

<div class="wagtail-richtext">
  {{ page.body|richtext }}
</div>

CSS file:

@tailwind base;
@tailwind components;

.wagtail-richtext p {
    @apply mt-5
}

Django - Wagtail: How to add classes to generated HTML elements from RichTextField

1 Answers1