In this Django tutorial we will see how to install tailwind css 3 in django 4 app. If you’re using Django 4, check out the following blog.
Step by Step How to Add Tailwind CSS 3 to Django 5
Step 1. Create Django 4 Project
Run below command to create Django project.
django-admin startproject project_name
Step 2. Add Templates Folder in Root Directory
Next, you need to create templates folder in root directory.
|-- project_name
|-- settings.py
|-- templates # new folder
|-- manage.py
Now you need to add templates path in your project_name/setting.py .
# settings.py
TEMPLATES = [
{
...
"DIRS": [BASE_DIR, "templates"], #add templates path
...
},
]
Step 3. Create App For URL and Setup Static Folder
Now you need to create app and static folder for tailwind css assets.
python manage.py startapp pages
Also create static folder and add path in project_name/setting.py Also don’t forget to add pages app in INSTALLED_APPS.
# settings.py
INSTALLED_APPS = [
...
'pages', #new
]
TEMPLATES = [
{
...
"DIRS": [BASE_DIR, "templates"],
...
},
]
...
STATIC_URL = "static/"
STATICFILES_DIRS = [BASE_DIR / "static/"] # add static path
Also create src folder and inside create input.css file src/input.css
static
└── src
└── input.css
Now create pages html pages and config URLs.
# pages/views.py
from django.shortcuts import render
from django.http import HttpResponse
def index(request):
return render(request, 'pages/index.html')
def about(request):
return render(request, 'pages/about.html')
pages/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('',views.index, name='index'),
path('about',views.about, name='about'),
]
project_name/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('', include('pages.urls')),
path('admin/', admin.site.urls),
]
Create all this page index.html, about.html and base.html.
![install tailwind css 3 in django 4 folder](https://pleypot.com/wp-content/uploads/2024/04/jY8kPc7PIGhQ9CjmAhHtsnfqvfOFk3KPyE9mhF4a.png)
Install tailwind css 3 in django 4 folder
Step 4. Install Tailwind CSS 3 in Django 4
Run below command to install tailwind css.
npm install -D tailwindcss
Create tailwind.config.js by running below command.
npx tailwindcss init
Now HTML source files to tailwind.config.js.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./templates/**/*.html"],
theme: {
extend: {},
},
plugins: [],
};
Next, you need to Add the Tailwind directives in static/src/input.css.
static/src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Now add npm command in package.json
package.json
{
"scripts": {
"dev": "npx tailwindcss -i ./static/src/input.css -o ./static/src/styles.css --watch",
"build": "npx tailwindcss -i ./static/src/input.css -o ./static/src/styles.css -m"
},
"devDependencies": {
"tailwindcss": "^3.3.3"
}
}
You can run npm command.
npm run dev
#or
npm run build
Add tailwind css code and styles.css in base.html.
templates/base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Use Tailwind CSS 3 in Django 4</title>
<link rel="stylesheet" href="{% static 'src/styles.css' %}">
</head>
<body class="bg-gray-100">
{% block content %}
{% endblock %}
</body>
</html>
templates/pages/index.html
{% extends 'base.html' %}
{% block content %}
<div class="flex justify-center items-center h-screen">
<h1 class="text-4xl text-blue-800">Install Tailwind CSS 3 in Django 4</h1>
</div>
{% endblock %}
![tailwind css v3 with django 4](https://pleypot.com/wp-content/uploads/2024/04/JmjQI4m4p1YkY25RSdFPWRD8arLUuNZB2d7B01CF.png)
tailwind css v3 with django 4
Step 5. Run the Django App Server
Run below command to serve the Django server.
python manage.py runserver
Saim
![](https://pleypot.com/wp-content/uploads/2024/07/saim-1-3-1-1.jpg)
Hi there! My name is Saim and I’m excited to dive headfirst into the world of Python Django. I’m eager to learn and grow every step of the way, and I’ll be documenting my journey through blog posts. I’ll share the highs, lows, and everything in between with you. Together, let’s uncover the wonders of Python Django and its endless possibilities in web development.