Django-Tailwind Setup — The Production Ready Way

Properly configure them with Python and NPM in a single project

Django is a widely popular web development framework, very suitably crowned with the punchline of being used by “the perfectionists with deadlines.” It provides an easy and fun way to spin together a web app with the power of Python and simple HTML and CSS.

As far as the styling is concerned, you can use any CSS framework easily in your Django application with a CDN. Sure, that works well for developments purposes but you do not want to use it in production for a variety of reasons.

What then, is the proper way to configure these two into a single project? With NPM of course!

Let me detail it for you in this article.

First of all, let’s configure a Django project.

If you already have a Django project ready, skip this step.

A simple way to do that would be inside a virtual environment. Do it like this:

pipenv shell # make a new virtual env
pipenv install django  
django-admin startproject mynewproject  # new Django project

Let’s make a sample app to run with in this article for pure demonstration purposes.

python mynewproject/manage.py startapp mynewapp

The next step is to configure Tailwind CSS with NPM

Now, from the root project folder, let’s run the following command:

$ npm install tailwindcss postcss postcss-cli autoprefixer

As a pro-tip: Do keep the Tailwind docs open as you go along this tutorial. They may be of some help with following everything you read here :)

Remember that Django has the concept of static files? All we need is our tailwind CSS configurations to compile properly into a regular minified CSS file which can then be read and understood by our Django templates!

That’s exactly what we’re going to do!

The next step is to run Tailwind init command:

$ npx tailwindcss init

This creates a new tailwind.config.js file in your root folder. Open it.

Fill in the following content:

module.exports = {

    content: ["./mynewproject/**/*.{html,js}"],

    theme: {

        extend: {

             colors: { // your theme colours, etc.

             },

        },

    },

    plugins: [],

    }

// and so on...

Note: The /**/ is very important here. It suggests two or more directories underneath the root Django folder.

If you remove it, any or all of the HTML you write in your templates may not be visible and hence will be compiled into minified CSS later on.

Save and close it.

Next, make a new file called postcss.config.js and paste the following content in there:

module.exports = {

   plugins: {

      tailwindcss: {},

      autoprefixer: {},

   }

}

This file makes the postcss aware that it is using Tailwind as a plugin for this project.

And finally, let’s move on to configuring our package.json.

Right now, you must be seeing this:

{
    "devDependencies": {

         "autoprefixer": "^10.4.5",

         "postcss": "^8.4.12",

         "postcss-cli": "^9.1.0",

         "tailwindcss": "^3.0.24"

}

We need to configure our build script here.

The final code will be like this:

{

    "scripts": {

         "build": "postcss ./mynewproject/static/css/main.css -o   ./mynewproject/static/css/main.min.css"

    },

    "devDependencies": {

         "autoprefixer": "^10.4.5",

         "postcss": "^8.4.12",

         "postcss-cli": "^9.1.0",

         "tailwindcss": "^3.0.24"

    }

}

See the little -o directive in there? That is what indicates postcss to compile our hoards of tailwind classes from the HTML templates in our Django project into the minified CSS in main.min.css file.

That’s it. We’re done. Let’s test it!

npm run build

You’ll see the following output:

You’ll see the main.min.css file appear in your static folder.

Only the last step is left!

Configure static files in Django

This is done by going into your setting.py file and adding:

STATIC_URL = "static/"

STATICFILES_DIRS = [BASE_DIR / "static"]

Most probably, the first line will already be present.

Also, don’t forget to add the {% load static %}expression in all of your templates from here onwards!

Perfect! Test your project by running the server, or if it’s a new project, writing some new HTML and views to see your hard work in action!

python mynewproject/manage.py runserver

Enjoyed this tutorial? Want to read more?

Here are all of my articles on Python, Go, SQL, and Data Science! Subscribe to never miss any updates!

Also connect with me on Twitter! I post tips there that are on the shorter side but very critical to be shared immediately! 😁

Here are a couple other articles of mine to spark your interest!