Wagtail With Tailwind CSS

The plan for this page is to record some tidbits of information found useful while using Tailwind CSS with Wagtail. It will be a work in progress and continue to grow as useful things are found. I so badly want to refer to this combination of CMS and CSS framework as Wagtailwind, but I can't be the first person to make that Jeopardy "Before and After" type clue.

Full Width Images

The Wagtail editor has a "full width" option in the image choose page. It appears to put a class of full-width on the image but Tailwind CSS uses a w-full. It's not just images; digging through the code, the full-width is used in many places including tables.

Tailwind CSS has the ability to handle such a situation by using the @apply directive in your source styles.css file. Something like the following should make the images full width.

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

.full-width {
  @apply w-full;
}

Cover photo by Lia Maaskant on Unsplash