Django-Tailwind with support for the latest Tailwind CSS v3 is out

Yesterday, as I was about to go to bed, I found out that Tailwind CSS 3.0 with lots of cool improvements had been released. Knowing that a lot of Django people adore Tailwind CSS so much, I decided I couldn't sleep until I upgraded Django-Tailwind to support the latest version of the library.

Long story short, I'm sleep deprived now, but you can enjoy the latest Tailwind CSS 3.0 on Django now. Just install Django-Tailwind 3.0 via:

pip install django-tailwind

And follow the installation instructions in the documentation.

In case you already have Django-Tailwind installed and don't want to update the Tailwind CSS library to 3.0, then you don't have to do anything. The latest Django-Tailwind will work with previously created projects just fine.

However, if you want to upgrade to Tailwind CSS 3.0 to use its latest features, chances are that your current Tailwind CSS library version is 2.x.

Luckily for us, Tailwind CSS developers tried to make changes as backward compatible as possible, so switching from 2.0 to 3.0 should not cause significant headaches. But for sure, it's for you to judge.

To switch from 2.0 to 3.0, you need to update a few configs and dependencies. So let's start!

In the following instructions, I assume that my TAILWIND_APP_NAME = 'theme', if it's different for you, replace the theme with an app name of your choice.

1. Update Django-Tailwind to 3.0 by running the following command:

   pip install --upgrade django-tailwind
   

2. Update dependencies and plugins via npm. Go to theme/static_src directory and run the following command:

   npm install -D tailwindcss@latest \
     @tailwindcss/typography@latest \
     @tailwindcss/forms@latest \
     @tailwindcss/aspect-ratio@latest \
     @tailwindcss/line-clamp@latest \
     postcss@latest \
     autoprefixer@latest
   

3. Open theme/static_src/bs.config.js and replace ...tailwindConfig.purge with ...tailwindConfig.content,

4. Open theme/static_src/tailwind.config.js in a code editor, and
5. Remove the mode property. In Tailwind 3.0, jit is always on, so there's no use of mode: jit string anymore,
6. Rename purge to content,
7. Remove dark mode configuration by deleting the line containing darkMode,
8. Staying with the open theme/static_src/tailwind.config.js file, refer to the official Tailwind CSS upgrade guide and see if there's anything else you need to change in your tailwind.config.js. In most cases everything should already be fine, but depending on your configuration, some parts may need your attention.

And that's it. You're now on the latest Django-Tailwind 3.0 with the latest Tailwind CSS 3.0 installed and ready to go.

If you enjoy Django-Tailwind, please give it a star on GitHub, we already have 621⭐