In this project i have done a simple connection between django and tailwind css.

  • By Yash Patel
  • Last update: Jan 3, 2022
  • Comments: 0

Django and tailwind css connection

open source contributors welcome

Tailwind css Node js Django Python

Steps to connect django and tailwind css

  1. Create django project using command: django-admin startproject myproject
  2. create django app using command: python startapp myapp
  3. Install django app in file:
  1. Setup static files in file:
    STATIC_URL = '/static/'
        os.path.join(BASE_DIR, 'static'),
  1. Setup file present in myproject folder:
from django.contrib import admin
from django.urls import path
from polls import views
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('', views.index, name="home")

    urlpatterns += static(settings.STATIC_URL, document_root = settings.STATIC_ROOT)
  1. Now create static folder where file is present
  2. Create css folder in static folder static/css
  3. Create tailwind.css file in css folder static/css/tailwind.css
  4. In tailwind.css file add following code:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Now come back to the folder where file is present and create a folder named jstools
  2. Now go to jstools folder and run following command:
npm init -y
npm install tailwindcss autoprefixer clean-css-cli
npx tailwindcss init -p
  1. In jstools>package.json file in script section add following code:
"scripts": {
    "build": "tailwind build ../static/css/tailwind.css -o ../static/css/style.css && cleancss -o ../static/css/style.min.css ../static/css/style.css"
  1. Now open jstools>tailwind.config.js file and replace all code by following code:
module.exports = {
    future: {
        removeDeprecatedGapUtilities: true,
        purgeLayersByDefault: true,
    purge: {
        enabled: false, //true for production build
        content: [
    theme: {
        extend: {},
    variants: {},
    plugins: [],
  1. In jstools folder finally run following command:
npm run build

Above command will create style.css and style.min.css files in static/css folder.