DEV Community

Cover image for Django + Tailwind CSS
Odipo Otieno (KwargDevs)
Odipo Otieno (KwargDevs)

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode
  • activation in windows
.\venv\Scripts\activate
Enter fullscreen mode Exit fullscreen mode
  • activation in Linux
source venv/bin/activate
Enter fullscreen mode Exit fullscreen mode
  • Install django
pip install django
Enter fullscreen mode Exit fullscreen mode

(2) create a project

django-admin startproject django_project .
Enter fullscreen mode Exit fullscreen mode

(3) create an app

python manage.py startapp myapp
Enter fullscreen mode Exit fullscreen mode

(4) create a folder for our static files

mkdir static/css
Enter fullscreen mode Exit fullscreen mode

(5) Add the following code in settings.py

STATIC_URL = "static/"
STATICFILES_DIRS = [
    BASE_DIR / "static",
]
Enter fullscreen mode Exit fullscreen mode

(6) create a folder for all tailwind resources

 mkdir resources 
Enter fullscreen mode Exit fullscreen mode
  • This folder is where we will run node [npm]:

(7) Change directory to resource folder

cd resources
Enter fullscreen mode Exit fullscreen mode

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

npm init -y 
Enter fullscreen mode Exit fullscreen mode
npm install tailwindcss autoprefixer clean-css-cli
Enter fullscreen mode Exit fullscreen mode
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

(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"
},
...
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

(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;
Enter fullscreen mode Exit fullscreen mode

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

npm run build
Enter fullscreen mode Exit fullscreen mode

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


And that's it basically

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

Top comments (0)