DEV Community

praveen
praveen

Posted on

Django with Tailwind (JIT) and Hot Reloading

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
Enter fullscreen mode Exit fullscreen mode
Add 'tailwind' to INSTALLED_APPS in settings.py:
INSTALLED_APPS = [
  # other Django apps
  'tailwind',
]
Enter fullscreen mode Exit fullscreen mode
Create a Tailwind CSS compatible Django app, I named it theme:
python manage.py tailwind init
Enter fullscreen mode Exit fullscreen mode

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'
]
Enter fullscreen mode Exit fullscreen mode

Register the generated 'theme' app by adding the following line to settings.py file:

TAILWIND_APP_NAME = 'theme'
Enter fullscreen mode Exit fullscreen mode

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",
]
Enter fullscreen mode Exit fullscreen mode

Install Tailwind CSS dependencies, by running the following command:

python manage.py tailwind install
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

For more details visit

https://github.com/timonweb/django-tailwind

Discussion (5)

Collapse
swdevbali profile image
Eko Suprapto Wibowo

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!

Collapse
swdevbali profile image
Eko Suprapto Wibowo • Edited

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 start

I need to manually reload the browser for the changes tho.

Collapse
aspraveen profile image
praveen Author

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:

  • "10000:10000" ( exact port you need to find)

I was able to fix the hot reloading in a sapper project as mentioned above

Thread Thread
swdevbali profile image
Eko Suprapto Wibowo

Right. Wasn't thinking that will be the case. Okay, checking that.

Thread Thread
swdevbali profile image
Eko Suprapto Wibowo

Well, it seems like it's not that trivial with docker: I found an open issue here: github.com/timonweb/django-tailwin...