How to integrate Tailwind CSS(v4) with Django.

Django is an awesome framework and sometimes we don't like to write the CSS files separately so in that scenario we can use an CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. Yes you are right it's Tailwind CSS. Using Tailwind CSS can significantly reduce the number of static files in your project.

Initialization of django project

In the beginning we will open the terminal and make a django project using command django-admin startproject myproject after this we will cd into our project, In this case command will be cd myproject.

Create an app inside your project by executing python manage.py startapp myapp. Include the app inside INSTALLED_APPS in settings.py file.

Image description

Installing Tailwind CSS

To use Tailwind CSS we need to install two npm packages tailwindcss and @tailwindcss/cli and for that we have to initialize this project with npm using the command npm init -y this command will create package.json for us.

Now install the packages using command given below. npm install tailwindcss @tailwindcss/cli

Make static a directory

In order to save static files create an empty folder named static in root directory and use following settings in your settings.py.

STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / "static"]
STATIC_ROOT = BASE_DIR / "staticfiles"

inside this static folder create another folder called src and inside src create a file named input.css. the input.css file should have the following code.

@import "tailwindcss";

Make templates

To organize our HTML we will create a empty directory called templates in root folder and add it in our settings.py like this 👇🏻

Image description

Now we will create a html file called index.html which will contain following code.

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django + Tailwind CSS v4</title>
</head>
<body>
    <div class="container mx-auto bg-gray-100 py-10">
        <h1 class="text-4xl font-bold text-center text-green-700 ml-30">Django + Tailwind CSS v4</h>
    </div>
</body>
</html>

Define views and add urls

your views.py should look like this.

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

your urls.py should look like this.

from django.contrib import admin
from django.urls import path
from myapp.views import index

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index, name='index'),
]

Start the Tailwind CLI build process

Open a terminal window and start the tailwind cli build process by executing command npx @tailwindcss/cli -i ./static/src/input.css -o ./static/src/output.css --watch this generate an file named output.css in the src directory which is specified earlier.

⚠️ make sure you do not close the above window during your development process so that tailwind cli can compile the tailwindcss code everytime we write.

now add that output.css into your index.html by adding following line in head <link rel="stylesheet" href="{% static '/src/output.css' %}">. your index.html should look like this 👇🏻

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django + Tailwind CSS v4</title>
    <link rel="stylesheet" href="{% static '/src/output.css' %}">
</head>
<body>
    <div class="container mx-auto bg-gray-100 py-10">
        <h1 class="text-4xl font-bold text-center text-green-700 ml-30">Django + Tailwind CSS v4</h>
    </div>
</body>
</html>

Now start the development server

Now you can start the development server by python manage.py runserver and you will be able to see following output.

Image description

More...

moreover you can refer official tailwindcss v4 documentation for more details like how to add dark mode and custom classes etc.

Thank You for reading the full blog.