How To Install And Use Tailwind CSS With Django 3.2 (2021)

Django is a great python framework for build a robust web application. But, you need the UI the look much better when you use this framework, that's why we use Tailwind CSS because it gives you the ability to create your own utility, so without much talk let's configure Django to use Tailwind CSS.

I will start by creating a brand new project so it will be clear to everyone.

First, I will create a new folder called "myProject" by typing this command in the terminal:

mkdir myProject && cd myProject

Now, we are inside the folder "myProject", then we create the django project (the core folder will contain all the global setting and routing in our django project):

django-admin startproject core .

Create an app called blog:

python manage.py startapp blog

Add the app name to the setting in the core folder, in "setting.py" add the name of the app:

Installed Apps Django

Let's create a folder named "templates" that contain all out HTML pages, you can create it in any directory you want in the same project, for me I will create the "templates" folder in the blog app as you see in the picture below:

Django App Folders Structure

Create a new folder called static in the blog folder that contains another folder called css :

Django App Folders Structure with css

Now, we should create a folder called jstools for all our Js stuff:

mkdir jstools && cd jstools

We are currently in the directory myProject/jstools/, then we run the node command for installing tailwind and all the dependencies related to it (make sure that you have Node installed in your PC):

npm init -y && npm install tailwindcss autoprefixer clean-css-cli && npx tailwindcss init -p

The directory will be like this:

Django App Folders Structure with css and tailwind npm

With all these dependencies installed, we must config package.json, add build to the script in your package.json:

...
"scripts": {
 "build": "tailwind build ../blog/static/css/tailwind.css -o ../blog/static/css/style.css && cleancss -o ../blog/static/css/style.min.css ../blog/static/css/style.css"
 },
...

If you put the static folder in a different directory feel free t change that in the path to that folder.

Then, configure the tailwind.config.js:

module.exports = {
 future: {
  removeDeprecatedGapUtilities: true,
  purgeLayersByDefault: true,
 },
 purge: {
  enabled: false, //true for production build
  content: [
   '../**/templates/*.html',
   '../**/templates/**/*.html'
  ]
 },
 theme: {
  extend: {},
 },
 variants: {},
 plugins: [],
}

Then, make a Tailwind entry point in blog/static/css/tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Now we are ready to build:

npm run build

This command will generate 2 output files: style.css and style.min.css

Link style.min.css with your HTML page, in this example we will link it with the index.html.

We go to the index.html and in the top of the page add:

{% load static %}

Then link the CSS file as follow:

<link rel="stylesheet" href="{% static 'css/style.min.css' %}" />

When you are developing and using all the capabilities of Tailwind remember to avoid the purge.

Output File Message for TailwindCSS

When you want to push your project on production just turn purge to true in the tailwind.config.js.

Contact

How To Install And Use Tailwind CSS With Django 3.2 (2021)