I was trying to set up the latest Tailwind (JIT) option for my latest Django project.
Thanks to the Django-Tailwind package from Tim Kamanin, in less than just 10 minutes, I was able to spin up a Django dev setup with 'hot reloading' feature.
steps involved
python -m pip install django-tailwind
Add 'tailwind' to INSTALLED_APPS in settings.py:
INSTALLED_APPS = [
# other Django apps
'tailwind',
]
Create a Tailwind CSS compatible Django app, I named it theme:
python manage.py tailwind init
During the initialization step, choose between Just in time (jit)
Then we need to add the newly created theme app to INSTALLED_APPS in settings.py:
INSTALLED_APPS = [
# other Django apps
'tailwind',
'theme'
]
Register the generated 'theme' app by adding the following line to settings.py file:
TAILWIND_APP_NAME = 'theme'
Make sure that INTERNAL_IPS list is present in the settings.py file and contains the 127.0.0.1 ip address:
INTERNAL_IPS = [
"127.0.0.1",
]
Install Tailwind CSS dependencies, by running the following command:
python manage.py tailwind install
The Django Tailwind comes with a simple base.html template located at theme/templates/base.html.
If you are using your own template just add {% tailwind_css %} to the base template:
{% load tailwind_tags %}
...
<head>
...
{% tailwind_css %}
...
</head>
The {% tailwind_css %} tag injects appropriate stylesheets and, when you’re in Development mode, connects to the browser-sync service that enables hot reloading of assets and pages.
Now you should be able to use Tailwind CSS classes in HTML.
Start the development server by running the following command and you are done :)
python manage.py tailwind start
For more details visit
Top comments (7)
Woa, thank you for this! I was about to gave up after reading this: weautomate.org/articles/using-vite...
I really dislike heavy configuration before doing any real work!
Let me try this and report it after. Looks good!
Hm, I run this in a docker environment, all setup, but I can't seems to activate the hot reload. Attached is console output of
python manage.py tailwind startI need to manually reload the browser for the changes tho.
Hi , This setup worked fine for me, but not on Docker .
I think you can do this on Docker by exposing the hot reloading port some thing like
ports:
I was able to fix the hot reloading in a sapper project as mentioned above
Right. Wasn't thinking that will be the case. Okay, checking that.
Well, it seems like it's not that trivial with docker: I found an open issue here: github.com/timonweb/django-tailwin...
First of all, thanks for the post and I'll try it out this week
Second, regarding the hot reloading on docker, if it's a network port issue, perhaps running the container with
docker run .... --network=host ...
might work as soon as i can try I'll update it
@swdevbali
Thanks so much for this article. Super helpful and easy. :)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.