DjangoDjango

Django Tailwind v2.0 is out. It brings the "JIT" mode and hot reloading.

Apr 20, 2021 · Updated: Apr 23, 2021 · by Tim Kamanin

I'm pleased to announce the release of the Django Tailwind v2.0.

Django Tailwind is an integration package for Tailwind CSS and Django. Its goal is to make your life easier without having to think much about the frontend tooling configuration.

With the help of the package, you generate a Django theme app with Tailwind CSS setup that doesn't need webpack, parcel, or any other scary JavaScript bundler. But if you're adventurous enough, you still have complete control over the generated Tailwind CSS configuration, so you can customize it and even run npm commands directly. It's up to you which route you want to take: simple or advanced, Django Tailwind has your back.

You can install Django Tailwind from PYPI via pip:

bash
pip install django-tailwind

The v2.0 update includes:

1. The brand-new Tailwind's jit mode

The jit mode uses a brand new compiler that generates all your CSS on-demand as you author your template files instead of generating your entire stylesheet upfront. The latter approach produces quite large stylesheets, and the jit mode is a very smart solution to that problem.

2. Hot asset and page reloads on CSS, config, and template updates

This feature is not part of Tailwind CSS. I decided to add it after working with many Tailwind CSS projects and experiencing the same pain again and again: I had to reload the page every time I updated my HTML or CSS or tailwind.config.js. My fingers were bleeding red from hitting the refresh button thousands of times, so I decided to end it.

In Django Tailwind v2, the developer experience is much more pleasant. You will get automatic page reloads and CSS updates as you author your templates. No manual page refreshes to check whether your stuff looks good aren't needed anymore! See the demo below:

Django Tailwind Demo

The feature is made possible thanks to the updated theme app template, that now uses browser-sync and nodemon under the hood. Those two are popular tools in the frontend world, but you don't have to think much about them; it all just works out of the box.

While Django-Tailwind v2.0 will work fine with theme apps generated with previous versions of the package, you'll have to regenerate your theme app to get the hot reloading feature. Please refer to the Migration documentation for step-by-step instructions.

What's next?

First of all, I'd love to get your feedback on Django Tailwind v2.0, I've got some, but now we're moving on to the broader "testing in the production" phase ;) So if you encounter any obstacles or find inconsistencies in the docs, please let me know in GitHub issues.

Next on my radar will be a better story for form templates. I have some exciting ideas about bringing more control over Django forms with Tailwind CSS, so stay tuned for updates.

Django Tailwind Github Repo: https://github.com/timonweb/django-tailwind.

Hey, if you've found this useful, please share the post to help other folks find it:

There's even more:

Subscribe for updates

  • via Twitter: @timonweb
  • old school RSS:
  • or evergreen email ↓ ↓ ↓