Using Tailwind CSS with Django (without the CDN)

I spent quite some time figuring out how to properly configure TailwindCSS to work with Django and consulted the below tutorials to come up with this set of instructions:

1. https://tailwindcss.com/docs/installation
2. https://stackoverflow.com/questions/63392426/how-to-use-tailwindcss-with-django

Let’s get to it!

1. Create a folder wherever you’d like, and rename it to your desired Django Project’s name. (For the sake of this article it’ll be called django-tailwindtest)

cd django-tailwindtest
virtualenv env
source env/bin/activate
pip install django
django-admin startproject djangotailwind .

2. Once we have our Django Project setup, you now want to create a few subfolders.

mkdir jstoolchain
cd jstoolchain
npm init -y
npm install tailwindcss postcss-cli autoprefixer
npx tailwind init
touch postcss.config.js
mkdir css
touch css/tailwind.css

3. Next, add this to the tailwind.css file that you have:

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

4. Then, in the postcss.config.js file, add the following:

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
}

5. Afterwards, you will want to edit the scripts part of the packages.json file so that it now reflects this:

“scripts”: {
“build”: “postcss css/tailwind.css -o static/css/tailwind-output.css”
},

To understand more about this build script, you may refer to this YouTube video I linked here (4:19 timestamp).

6. Now, in the terminal, run:

npm run-script build

Your directory should now look like this:

You will have 2 folders named css, but you should only use the one that is under the static folder to link to your Django application

That’s it! TailwindCSS has been properly configured to be used together with Django! Hope this helps clear any doubts you may have!