Django with Tailwind (JIT) and Hot Reloading

praveen — Wed, 21 Apr 2021 20:48:05 +0000

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'
]

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

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

DEV Community: praveen

Django with Tailwind (JIT) and Hot Reloading

steps involved

Add 'tailwind' to INSTALLED_APPS in settings.py:

Create a Tailwind CSS compatible Django app, I named it theme: