How to use Tailwind in Django and not die in the attempt?

Django is a powerful web framework that makes a lot of stuff for us. Tailwind is a CSS framework that allows us to make a great UI using utility classes.

First, we create a project (in my example I call it Poti because of my dog)

$ django-admin startproject poti

Now we create a core app and a folder for our static files

$ python manage.py startapp core
$ mkdir static
$ mkdir static/css

Then, we must create a folder for all our JS stuff

$ mkdir jstools && cd jstools

Once inside our folder, we run node here

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

With all these dependencies installed, we must config…

package.json

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

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

And now make a Tailwind entry point in static/css/tailwind.css

@tailwind base;

@tailwind components;

@tailwind utilities;

We are ready to build.

npm run build

This command will generate two files: styles.css and styles.min.css

Link styles.min.css to your templates and enjoy.

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

Example of building for dev 2.29MB with all the classes and utilities of Tailwind

Example of building for production 19.29KB -> 10KB minified