Installing Tailwind CSS v2 with Django-TailwindDec 09, 2020 · by Tim Kamanin
Recently, there have been loads of tutorials on how to integrate Tailwind CSS and Django. There are several different ways you could do this, from the simplistic "let's include a link from CDN" to "roll-up your sleeves and dive into the Webpack black hole."
I've been working with Tailwind CSS since the beginning of 2019 and quickly realized that I didn't want to repeat myself and needed a reliable and straightforward theme setup that ticks all the right boxes. And for me, those boxes are:
- Have the latest version of Tailwind CSS installed (v2.x currently);
- Have the development mode that watches for changes in my CSS files;
- Have SASS support in my CSS files.
That's how Django-Tailwind was born. Now, 88 commits and almost two years later, it has 222 stars and supports the shiny new Tailwind CSS v2 by default.
So what does Django-Tailwind do for you?
Django-Tailwind has a
python manage.py tailwind init <my_theme_name> command that generates a separate Django app for you. That app contains all the Tailwind CSS configuration and static assets.
After you have generated the theme app, you could turn off
django-tailwind and forget about it. Your theme app doesn't need it to function correctly. But I suggest you leave the
django-tailwind package on as it has some convenient tools you might like to use, like
tailwind start and
tailwind update commands.
Let me guide you through the installation process
Install the package:
pip install django-tailwind
Generate a theme app with the Tailwind configuration:
python manage.py tailwind init my_theme_name
my_theme_nameapp to to
my_theme_nameapp by adding the following string to
TAILWIND_APP_NAME = 'my_theme_name'
Run the following command to install Tailwind CSS dependencies:
python manage.py tailwind install
Start Tailwind CSS in dev mode:
python manage.py tailwind start
This will start Tailwind CSS in watch mode, so that it will regenerate the stylesheet every time you edit SCSS files in the
And basically that's all. You now have everything installed and configured.
Going to production
When you're ready, you can generate a production bundle by running the following command:
python manage.py tailwind build
Updating Tailwind CSS
To check if there are any updates for Tailwind CSS dependencies, run:
python manage.py tailwind check-updates
If there are any updates, you should see them listed on the screen.
To update Tailwind CSS dependencies, run:
python manage.py tailwind update
There might be some hiccups down the road, mainly related to the Node/NPM installation on your system, but in the majority of cases, if you're on Node v12.3+, you should be fine. Please refer to the
README.md for advanced use-cases, like Purge CSS setup, or for advice on how to overcome some Windows-related issues.
Although I don't think there's much that needs to be added to this package, if you have any ideas or fixes, feel free to jump into the issue queue of the django-tailwind repository and let me know.
Thank you and take care!