The Wagtail + Tailwind Experience

The Wagtail + Tailwind Experience

Imagine actually staying within your markup and adding css without having to write a separate stylesheet or linking an external asset!

I have been in a bit of a jam recently trying to merge the two technologies which promise to be the focus of modern web technologies in the nearest future. They are Wagtail and Tailwind . It isn't that they are so hard to merge but that they have been undergoing several updates which I have been following and have only just now matured enough to use properly. The roadmap for both are pretty inspiring and I wont mind joining the development on Github.

I first started using Tailwind with the Gridsome framework which is based on Vue and makes building static websites and apps a breeze. The experience was amazing and therefore I decided to make it my main CSS framework. Compared to Bulma and even Bootstrap, it is obvious that a lot of work and experience has gone into creating the experience that is Tailwind.

Using CSS on the fly within the HTML while building an interface is really underrated and is the most amazing experience once you get the hang of it. The CSS utility classes are easy to remember and even though most colours and palettes are covered you can create custom colours and tweak every single aspect of CSS like flex, grid, spaces, containers, media queries, text sizes, shadows and a whole lot more.

I started using Tailwind at version 1.1 and then it went through several changes till it got to version 2. I had been using it on Gridsome but found that it broke older sites I had worked on whenever they made an update. There seemed to be no backward compatibility and support for older versions. Since sites generated with Gridsome and Tailwind retained their CSS styling this wasn't really a problem except when I wanted to make updates and then trying to work on the Github repo on a new machine goes completely topsy-turvy and then I have to go through the motions of fixing bugs and searching the web for solutions.

My point is I felt it was better to wait till the updates were mature but I really wanted to use it with Wagtail which is basically Django on steriods. Wagtail has also been in active development and has a lot of cool features. The template tagging system of Wagtail means a lot of functionality can be built into an application with all the power of Python and a wide range of well tested plugins in the Django ecosystem. Coming from a Wordpress background and making the switch from PHP, which I barely understood, to learning Python and researching the web frameworks to learning CSS properly to stumbling on these amazing frameworks, I'd say I have come a long way from the wack web developer I used to be. When I want to do a normal static site I use Gridsome and when I want to build a dynamic app I prefer Wagtail. On both occasions there's nothing more pleasing than creating web interfaces with the ease offered by Tailwind.

On a side note Vue has a framework for dynamic applications called Nuxt which comes with server side rendering and all that but since I prefer Python for backend I stick with that in the form of Wagtail . You should totally check them out.