Django + Tailwind setup

5th Feb 2023
2 min read
Tags:
django,
python,
tutorial

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's node_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 a templates folder in the root of the Django project and a templates folders inside each of my apps (remember to configure these in your settings.py):

content: [
        './templates/**/*.html',
        './apps/**/templates/**/*.html'
]

Inside your css folder, create a tailwind.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 a static/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.