How to integrate Tailwind CSS(v4) with Django.

Kundan Bhardwaj — Tue, 04 Mar 2025 10:35:44 +0000

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.

In order to use Tailwind CSS with Django you have to follow the steps given below :

initialize a django project.
initialize npm and install tailwindcss.
make static directory.
create templates.
add views and urls.
Start the Tailwind CLI build process.
Start the development server.
More...

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.

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 👇🏻

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.

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.

why you should learn from documentation ?

Kundan Bhardwaj — Thu, 13 Feb 2025 13:28:47 +0000

introduction

Hello folks 👋🏻 let's know why it is important to learn from documentation instead of tutorials or Gen AI tools.

Introduction
Which technology do you want to learn ?
What is your experience level ?
Why documentation ?
How to learn effectively ?
Dark mode
Conclusion.

Which technology do you want to learn ?

Learning a technology can take time. Some technologies have simple documentation while some don't, for example people find Django docs tough. The reason behind this is the domain of the technology i.e Django is a backend framework and has a complex architecture. On the other hand there are also simple documentations like Tailwind CSS.

What is your experience level ?

If you are a absolute beginner you should clear your basics from tutorials and make something working by yourself and then you can jump in to the documentation.

Why documentation ?

Based on my personal experience I was very confused with react state management what I have done is opened React Documentation
there I found a very good explanation of react states using tic-tac-toe game which saved my hours of hopping through random learning material.

Main advantages

Makes deep understanding - if you want to get deep understanding of some technology you should check documentations out.
Saves Time - because it takes less time to read docs. as compared to watching tutorials.
Always Updated - Technologies are updated regularly, as a result sometimes what we learn from online resources do not match the current version of that technology and you get stuck. But documentations consist of all the versions.

How to learn effectively

Almost every documentation is written in similar manner. So here i will take 'Django documentation' as reference.

Go to the Table of Contents section of the documentation.
If you are a beginner there would be a starter tutorial for sure in our case we have Django at a Glance.
By following the starter tutorial make something by yourself.
If you already know something about that technology you can use Ctrl+K to search some specific term.

How to force dark mode

Sometimes dark mode is not available on the documentations like graphene-python and if you prefer dark mode you can force dark mode on any website by just enabling the dark mode option in chrome://flags as shown in the picture.

conclusion

Use the typography and the navigations in the documentation effectively you will be able to understand the technology very well.

DEV Community: Kundan Bhardwaj