Django + Tailwind CSS

YouTube Tutorial on how to Configure Django With Tailwind CSS

(1) create a virtual environment and activate it

• creating a virtual environment

python -m venv venv

• activation in windows

.\venv\Scripts\activate

• activation in Linux

source venv/bin/activate

• Install django

pip install django

(2) create a project

django-admin startproject django_project .

(3) create an app

python manage.py startapp myapp

(4) create a folder for our static files

mkdir static/css

(5) Add the following code in settings.py

STATIC_URL = "static/"
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

(6) create a folder for all tailwind resources

 mkdir resources 

• This folder is where we will run node [npm]:

(7) Change directory to resource folder

cd resources

(8) Run the following commands to initialize npm, install required resources and initialize tailwindcss respectively:

npm init -y 

npm install tailwindcss autoprefixer clean-css-cli

npx tailwindcss init -p

(9) Now we must make some modifications in some file
i.e in:

package.json
Replace "scripts" with code below

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

tailwind.config.js
Replace whole code with the one below:

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

(10) We add some input to tailwind, that will be processed to give what we want in static/css/tailwind.css

@tailwind base;

@tailwind components;

@tailwind utilities;

(11) Now we run the build command we added to the package.json file before

npm run build

Two files will be generated: 

a)styles.css

b)styles.min.css

(12) Link the style.css file to your django html file's head tag

NOTE: Explanations are in my YouTube Channel, Click Here -> KwargDevs For My YouTube Channel