Django + Tailwind setup
This setup is quite simple and it's based on the django-tailwind package (I stole some ideas from it):
- Install Tailwind Standalone CLI and configured as instructed (
tailwind.config.js
). This install TailwindCSS tools without the need for installing NodeJS and it'snode_modules
fat companion. Don't forget to add the path for the Tailwind binary in your executables path. - In
tailwind.config.js
, use the content section bellow. The content array needs to include all your path globs to Django template files. The example bellow assumes atemplates
folder in the root of the Django project and atemplates
folders inside each of my apps (remember to configure these in yoursettings.py
):
content: [
'./templates/**/*.html',
'./apps/**/templates/**/*.html'
]
- Inside your
css
folder, create atailwind.css
file. It is here where you're going to write your css/tailwind magic. A basic file content would be:
@tailwind base;
@tailwind components;
@tailwind utilities;
- Using whatever tool you already use (Terminal, iTerm, Windows Command/Powershell, PyCharm Watcher - I use this one), start a Tailwind watcher to create your final css file and use it as you wish (I use it in my
base.html
template - all templates extends from it). Remeber to execute the command from your Django project root folder. The example bellow expects astatic/css
folder in the root of the project. E.g.:
tailwindcss -i static/css/tailwind.css -o static/css/styles.css -- watch
Whenever tailwind.css
file is changed, a new styles.css
is created. And as it's recreated, when you reload you Django site, those changes are applied (remember styles.css
is on my base.html
template).
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
That's all about it. Now you have a simple setup, no new dependencies, can be integrated on your IDE (I use it with PyCharm's File Watchers) and can be very customizabe.