DEV Community

Cover image for Adding Tailwind CSS to Django
Paul
Paul

Posted on

Adding Tailwind CSS to Django

The quickest way to get started with Tailwind in CSS is by using
Django tailwind.

We'll walk you through the Django-tailwind setup.

First, you need to install the django-tailwind package. You can do this using pip

pip install django-tailwind
Enter fullscreen mode Exit fullscreen mode

Then add django-tailwind to INSTALLED_APPS in settings.py

INSTALLED_APPS = [
    ...
    'tailwind',
    ...
]
Enter fullscreen mode Exit fullscreen mode

Now create a tailwind app

python manage.py tailwind init <tailwind_app_name>
Enter fullscreen mode Exit fullscreen mode

Now add that app to INSTALLED_APPS

INSTALLED_APPS = [
  # other Django apps
  'tailwind',
  'tailwind_app_name'
]
Enter fullscreen mode Exit fullscreen mode

Now go ahead and register the app by adding the following in settings.py

TAILWIND_APP_NAME='<tailwind_app_name>'
Enter fullscreen mode Exit fullscreen mode

By default Django tailwind includes a base.html file, if you are not using that base.html file, you can delete it and add the following to your custom base.html

{% load static tailwind_tags %}
...
<head>
   ...
   {% tailwind_css %} <!-- this adds the css stylesheet -->
   ...
</head>
Enter fullscreen mode Exit fullscreen mode

Now that's done, lets start our tailwind by using the following command

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

For production build use

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

That's it you can now start using Tailwind in Django. If you want to read advanced usage, check out their docs

Top comments (0)