How to Integrate Tailwind CSS in Django?

Published On: 10/11/2022 | Category: Django


Hi Dev,

Here, I will show you how to integrate tailwind css in django. you can understand a concept of how to use tailwind css in django. you will learn how to create a django tailwind css. if you want to see example of how to integrate tailwind css in python django then you are a right place.

The django-tailwind framework will be used to style Django applications more effectively in this tutorial. In Django projects, this takes use of the tailwind styling classes.

Here i explained simply step by step example of how to integrate tailwind css in django.

Step 1: Project setup

This lesson will begin with the creation of a project structure using Django's methodology. We must first create a storage space for the project.

Open your git bash, and type in the following commands:

cd
cd Desktop
mkdir project
cd project

As illustrated below, let's create a virtual environment for the project and install the necessary dependencies:

python -m venv env
source env/Scripts/activate
pip install django django-tailwind
pip freeze > requirements.txt

Let's launch the Django server, add a few applications, and configure them in the project settings. The following code snippet will be used to accomplish this:

django-admin startproject myprojectapp
python manage.py startapp comment
python manage.py runserver

Step 2: Integrating django-tailwind

A specific app with all of its dependencies is necessary for the django-tailwind framework. Using tailwind classes in the templates, this framework enables us to style the application.

python manage.py tailwind init

Now open the project settings, navigate to the INSTALLED_APPS, and add the snippets below:

'tailwind'
'theme'
'comment'

Additionally, it is necessary to define the internal IP address and register the app name in settings.py, which is located just beneath the file.

settings.py
TAILWIND_APP_NAME = 'theme'
INTERNAL_IPS = [
    "127.0.0.1",
]

Additionally, the tailwind dependency needs to be set up. Nevertheless, installing this requires the npm node package manager, which is included in the node package.

python manage.py tailwind install

If your operating system is either Linux or MacOs, add the snippet below:

NPM_BIN_PATH = '/usr/local/bin/npm'

Otherwise, this works for Windows operating system:

NPM_BIN_PATH = r"C:\Program Files\nodejs\npm.cmd"

In order for the styling to be applied during the development stage, we also need to include a library that handles automatic page refreshing. The settings.py file's INSTALLED APPS variable should now contain the line below.

'django_browser_reload'

The middleware of the same settings file should now contain the following code. If DEBUG is set to True, it will add the script tag to every HTML response.

"django_browser_reload.middleware.BrowserReloadMiddleware",

Step 3: Making route for the project

The middleware that was added to the root urls.py must then have a route created. In order for the styling to take effect, this route will automatically reload the browser.

Now duplicate the text below and paste it into the root URL file's urlpatterns list.

path("__reload__/", include("django_browser_reload.urls")),

We previously created an app named comment. Create the urls.py file in the open folder, then paste the following code inside of it:

comment/urls.py
from django.urls import path
from.  import views

urlpatterns = [
    path('', views.homepage, name="index")
]

Next, add the file created above to the URL patterns list in urls.py in the root folder. The root will be able to keep track of URLs that match the app thanks to this.

path('', include('comment.urls')),

Step 4: View for the project

Let's create the comment app's initial views. We'll accomplish this by use a straightforward functional view called index that is based on the route that we took.

Open the views.py file inside the comment app and type the following:

comment/views.py
from django.shortcuts import render

# Create your views here.

def homepage(request):
    return render(request, 'base.html')

Finally, start the development server using the commands below in a separate terminal.

python manage.py tailwind start
python manage.py runserver

I Hope It will help you....