Dec 09, 2020 · Updated: Jan 30, 2021 · 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:
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.
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.
1) Install the package:
pip install django-tailwind
3) Generate a theme app with the Tailwind configuration:
python manage.py tailwind init my_theme_name
4) Add the
my_theme_name app to to
5) Register the
my_theme_name app by adding the following string to
TAILWIND_APP_NAME = 'my_theme_name'
6) Run the following command to install Tailwind CSS dependencies:
python manage.py tailwind install
7) Start Tailwind CSS in dev mode:
python manage.py tailwind start
Tailwind CSS will start 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.
When you're ready, you can generate a production bundle by running the following command:
python manage.py tailwind build
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!
Hey, if you've found this useful, please share the post to help other folks find it: