diff --git a/wagtail/apply_classes_to_streamfield_elements.md b/wagtail/apply_classes_to_streamfield_elements.md new file mode 100644 index 0000000..c0c316f --- /dev/null +++ b/wagtail/apply_classes_to_streamfield_elements.md @@ -0,0 +1,53 @@ +# Applying Tailwind classes to Wagtail StreamField elements + +## Links + +- [How to use StreamField for mixed content — Wagtail Documentation 6.1.1 documentation](https://docs.wagtail.org/en/stable/topics/streamfield.html) + +## Use case + +I have a Wagtail StreamField. This is the one from the [docs]((https://docs.wagtail.org/en/stable/topics/streamfield.html)): + +```python +from django.db import models + +from wagtail.models import Page +from wagtail.fields import StreamField +from wagtail import blocks +from wagtail.admin.panels import FieldPanel +from wagtail.images.blocks import ImageChooserBlock + +class BlogPage(Page): + author = models.CharField(max_length=255) + date = models.DateField("Post date") + body = StreamField([ + ('heading', blocks.CharBlock(form_classname="title")), + ('paragraph', blocks.RichTextBlock()), + ]) + + content_panels = Page.content_panels + [ + FieldPanel('author'), + FieldPanel('date'), + FieldPanel('body'), + ] +``` + +I need the elements of the StreamField, like the `heading` and the `paragraph`, to have different Tailwind classes applied to them. + +## Solution: Apply a CSS class, then implement the Tailwind classes in the CSS file + +> Note: This TIL assumes your Tailwind setup is already configured and working. I wish I had written that TIL when I did that, but I did not. + +In my template, I added the class `custom-page` to where I render the `body`: + +```html +{% load wagtailcore_tags %} + +{% for block in page.body %} + {% if block.type == "heading" %} +

{{ block.value }}

+ {% elif block.type == "paragraph" %} +

{{ block.value|richtext }} + {% endif %} +{% endfor %} +```