Installing Tailwind CSS v2 with Django-Tailwind
Dec 09, 2020 · by Tim KamaninRecently, 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:
bash pip install django-tailwind
Add
tailwind
toINSTALLED_APPS
insettings.py
;Generate a theme app with the Tailwind configuration:
bash python manage.py tailwind init my_theme_name
Add the
my_theme_name
app to toINSTALLED_APPS
insettings.py
;Register the
my_theme_name
app by adding the following string tosettings.py
:python TAILWIND_APP_NAME = 'my_theme_name'
Run the following command to install Tailwind CSS dependencies:
python python manage.py tailwind install
Start Tailwind CSS in dev mode:
python 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
my_theme_name
app.
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!