Dec 10, 2021 · by Tim Kamanin
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
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
Luckily for us, Tailwind CSS developers tried to make changes as backward compatible as possible, so switching from
3.0 should not cause significant headaches. But for sure, it's for you to judge.
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.
Update Django-Tailwind to
3.0 by running the following command:
pip install --upgrade django-tailwind
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
Open theme/static_src/bs.config.js and replace
modeproperty. In Tailwind
jitis always on, so there's no use of
mode: jitstring anymore,
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⭐
Hey, if you've found this useful, please share the post to help other folks find it: