Beautiful Wagtail Content with Tailwind CSS Typography Plugin
Wrapping Tailwind CSS's Prose Typography plugin around Wagtail's RichText Block StreamFields output produces beautiful results
Banook Canoe Club, a non-profit canoe and kayak club in Dartmouth, Nova Scotia, Canada has placed me in charge of their communications and systems needs for the membership and general public. Approaching this as an Industrial Engineer, I took a look at the big picture, and found a number of unconnected systems responsible for various components of the club’s data and operation. Some of those systems have been in place for years, others are new, costing the club money every month. None of the systems are connected, data is duplicated and not in sync; so just about exactly the size of challenge I was looking for and a very common situation I've found in small businesses and large companies.
After taking in the big picture, I determined my highest priority was to get control of the membership list to be able to better communicate with our members. I’ve been using Django for a number of years and instinctively selected it for the platform to store a membership list, record member communication preferences and manage event registrations. I wanted to have a “Member's Login” on the site and realized that before I can get to a member’s login, the website was going to need a refresh.
A WordPress site has been serving the club well for a number of years, however, I have limited familiarity with WordPress plugins, having focused on Python for most development needs in the last 10 years. I remembered looking at Wagtail sometime around 2015 and although promising even then, I had no use for a CMS at that time; but now, seeing a new version had recently been released I decided to try it for the club’s CMS. It has been a good decision.
Fast forward through hours and hours of videos from Learn Wagtail and feeling like Kalob Taulien and I are now best friends, I figured I may as well take this opportunity to really feel like a beginner and learn Tailwind CSS for the site layout and design. I’ve been using Bootstrap for years, and continue to use it for multiple other projects but I really like the direction and methodologies the Tailwind CSS team has been demoing. I’ve been particularly impressed with the clean look, attention to the design and the feeling I am free to explore more during development. I’d classify myself as a backend developer who can do well enough in a business to business admin dashboard or task oriented site, but have yet to master colour and whitespace. Tailwind CSS, through the keen eye of Steve Schoger and others, has allowed me to rely on their expertise when it comes to design principles.
A week or so passes, and things are going great, I’ve got a responsive layout done, the menu system is working, the footer snippets are in place. Time to get to the “Latest News” section. Following along the Learn Wagtail videos for creating a blog and all is going well. The site is small enough that copying content from the old site’s front end is manageable. I open up the old site in Chrome, copy the text from one of the pages and it pastes with formatting into the admin screen. Fantastic!! I have a small celebration, but with no team to celebrate with, I keep going. I view the page in the front end and it looks terrible. Celebration is over. Why did it look formatted in the admin, but unstyled in the front end?
One of the decisions the TailWind CSS team made was a preflight normalization of all (or most) html entities. That means headings are unstyled, margins are removed, lists are unstyled and images are all block level. I naively thought to myself, “Well the RichTextEditor only has a handful of options for bold, italic, and a few headings, maybe I’ll wrap the article text in a class, write some CSS for it and move on.” I was about 100 lines into crafting some terrible css and found I needed to manage a list with a nested list. My CSS skills had reached their limit. After reviewing Stack Overflow questions on the topic for 15 minutes I decided to sleep on it.
Here is my plug for open source. I am employed at a mid sized law firm as a systems analyst with particular emphasis on supporting the Finance department’s needs (time and billing). Firms of this size pay thousands of dollars for support for products that can’t be easily updated, require outside project management to oversee due to the complexities, have 6 month to year long upgrade projects and support is generally spotty (with a few exceptions). My experience with startups like Clubhouse.IO with free plans for small teams, and open source projects like TailWind CSS, Django-Auth-ADFS and now Wagtail, have cemented my belief that we can do better, and owe it to the teams of people behind these projects to give back however we can. This sentiment may be much better stated on a previous blog post.
The Tailwind CSS community is active on Twitter, so just before heading off to sleep I let them know via a tweet about the issue I ran into.
The next day I woke up to an early reply from Tobias Wollender, who I don’t think has any relation to Tailwind CSS. I think people who use open source tools are more likely to help others using those tools - thank you Tobias!
Thanks to some good documentation, this Typography plugin turns out to be super easy to add; immediately the articles on my staging site look well styled and easy to read in the front end of the site simply by wrapping the content with a class “prose”.
Adding the “lg:prose” adds some additional spacing for large breakpoints; one of the coolest things is that the typography plugin increases the margins to immediately make it more readable. Tailwind Labs has a video showing a site conversion which demonstrates this quite nicely: https://youtu.be/PUYvTrQTm2M?t=3090.
I’m at a point now where we start going through the task of reviewing the current site top to bottom and ensuring accuracy, articles are proofread and spell checked and all content is edited. While that’s happening we’ll most likely spin up a shared host on Linode or Digital Ocean to build out the ‘Future Prod’ instance of the site and put together our deployment plan. I’ve still got plenty to learn with Wagtail, but the combination of Wagtail and TailwindCSS has reduced efforts greatly, allowing me to focus on our overall infrastructure and get to that Members Login feature/subsite.
I’m hoping to go live with the new site sometime in the month of December 2020, allowing a path forward for new features under a single system, with one membership list and a cms that plays nicely with my plans for document automation, notifications and board of director management. Anything created which is potentially useful to others will land somewhere under my GitHub page.
Thank you to Tom for inviting me to share my experience so far with our migration from WordPress to Wagtail + Tailwind CSS.