How to Install and Use Tailwind CSS with Django 3.2 (2021)

Django is a great Python framework for building robust web applications. But you need the UI to 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 utilities. So without further ado, let's configure Django to use Tailwind CSS.

Create the project and app#

I'll start by creating a brand new project so it's clear for everyone. First, create a new folder called "myProject" with:

mkdir myProject && cd myProject

Now we're inside "myProject". Create the Django project (the core folder will contain all global settings and routing):

django-admin startproject core .

Create an app called blog:

python manage.py startapp blog

Add the app name in the core folder: in settings.py add the app to INSTALLED_APPS:

Create a folder named "templates" for all your HTML pages. You can put it anywhere in the project; I'll put it in the blog app:

Create a folder called static in the blog folder, and inside it a folder called css:

Install Tailwind and set up the build#

Create a folder called jstools for all JS-related tooling:

mkdir jstools && cd jstools

We're in myProject/jstools/. Run the Node commands to install Tailwind and related dependencies (make sure Node is installed):

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

The directory will look like this:

With these dependencies installed, add a build 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 your static folder is in a different directory, adjust the paths accordingly.

Configure Tailwind#

Configure 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: [],
}

Create a Tailwind entry point at blog/static/css/tailwind.css:

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

Build and link the CSS#

Now build:

npm run build

This generates two output files: style.css and style.min.css.

Link style.min.css in your HTML. In this example we'll link it in index.html. At the top of the template add:

{% load static %}

Then link the CSS:

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

When developing, keep purge disabled so you can use all of Tailwind's features.

Production#

When you're ready for production, set purge to true in tailwind.config.js.