How to integrate Tailwind CSS into your Django project

In today’s world of web development, where speed while maintaining code quality has been a constant challenge, the use of modern tools like Tailwind CSS that help to bridge this gap has been on a constant rise.

Tailwind CSS is a utility-first CSS framework that allows for rapid UI development, maintainability, and performance through its set of pre-designed utility classes. It has proved to be a valuable tool for developers looking to optimize their performance and create efficient web apps.

Integrating Tailwind CSS into your Django project can be a great way to speed up your UI development and improve the user experience of your web application. In this article, we'll delve into how to integrate Tailwind CSS into a Django project.

This article covers the basic steps of:

Creating a virtual environment and setting up a Django project
Installing and configuring Tailwind CSS
updating your Django templates to use Tailwind CSS classes
and configuring Django Views and Routes.

and by the end of this article, you'll understand how to integrate Tailwind CSS into your Django project for seamless workflow.

Pre-requisites

Must have Python installed
Must have Node JS installed
An understanding of Python programming language
An understanding of Django Framework

Setting up a New Django Project

Simply follow these steps to set up a new Django project.

Create a new directory for your project by running mkdir django-tailwind in your terminal or command prompt
Navigate into that directory with cd django-tailwind
In the directory, create a virtual environment for you Django project using py -m venv .venv
Activate the virtual environment using .venv/Scripts/activate
Inside the virtual environment, run pip install django to install the Django framework.
Run django-admin startproject django-tailwind to initiate a new Django project. Replace django-tailwind with your desired project name.
Create a Django app by using python manage.py startapp my-app

Add the newly created app to the list of installed apps in the settings.py file.


 INSTALLED_APPS = [
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'my-app',
 ]

Create a new urls.py file inside your app’s directory and register it in the main project urls.py file.

 from django.contrib import admin
 from django.urls import path, include

 urlpatterns = [
     path('admin/', admin.site.urls),
     path("", include("my-app.urls")),

Installing and configuring Tailwind CSS in your Django project

Simply follow these steps to install and configure Tailwind CSS in your Django Project:

Install the django-tailwind package using:
```
 python -m pip install django-tailwind
```

After installation, add tailwind to your list of installed apps in settings.py file

 INSTALLED_APPS = [
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'my-app',
     'tailwind',
 ]

Create a Tailwind CSS compatible Django app using:
```
 python manage.py tailwind init
```
NOTE: The python manage.py tailwind init command creates a special app that contains all of the django-tailwind dependencies, and it is this app that enables us use the Tailwind classes for styling in Django. By default this app name is "theme", however you can replace it with your preferred app name.

Add this app(theme) to the list of installed apps in the settings.py file:

 INSTALLED_APPS = [
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'my-app',
     'tailwind',
     'theme',
 ]

In your settings.py file, register the theme app using TAILWIND_APP_NAME = 'theme'
Configure the theme app internal IP address in your settings.py file using:
```
 INTERNAL_IPS = [
     "127.0.0.1",
 ]
```
NOTE: Configuring the INTERNAL_IPS allows you to specify a list of IP addresses that are considered trusted.
Set the NPM_BIN_PATH in your settings.py file using:
```
 NPM_BIN_PATH = "C:/nodejs/npm.cmd”
```
NOTE: The path above might differ for everyone, however you can find yours by running where npm(for windows) or which npm(for Mac OS) in your command prompt or terminal and copy the first path that ends with .cmd
Install the Tailwind CSS dependencies into your project using:
```
 python manage.py tailwind install
```

Updating your Django templates to use Tailwind CSS classes.

Inside the theme app, locate the templates directory, inside it you’d find a base.html already created by default. To update Django templates to be able to use it, locate TEMPLATES in your settings.py file, and add “theme” inside the “DIRS” square brackets:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['theme'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Configuring Django Views and Routes.

Configuring Views

Locate the views.py file inside your app’s directory, and create a view that displays the default HTML file generated by django-tailwind

from django.shortcuts import render

def home(request):
    return render(request, "base.html")

Creating Routes

Locate the urls.py file you created in your app directory and create your routes for the view.

from django.urls import path
from . import views

urlpatterns = [
    path("", views.home, name="home-page")
]

Running your Server

For your app to be properly displayed, 2 servers(Tailwind and Django server) needs to be running:

Launch the tailwind server using python manage.py tailwind start
Open up another terminal window and launch the Django server with python manage.py runserver

The development server will be started at http://127.0.0.1:8000/

Additional Configuration

An additional feature that can be added is the django_browser_reload, which takes care of automatic page reloading after any change during development.

To Install django_browser_reload, run the following command: python -m pip install django-browser-reload

After installation, add django_browser_reload to your list of installed apps in settings.py file

 INSTALLED_APPS = [
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'my-app',
     'tailwind',
     'django_browser_reload',
 ]

After this, any changes made during development are automatically reflected without the need to refresh your browser thus ensuring an efficient workflow.

Jude's blog