Step-by-Step Guide to Integrate Tailwind CSS in Your Django Project

Step 1: Initialize npm in Your Django Project

First, you need to initialize npm in your Django project directory:

npm init -y

This will create a package.json file in your project.

Step 2: Install Tailwind CSS

Install Tailwind CSS as a development dependency:

npm install -D tailwindcss

Step 3: Generate Tailwind CSS Configuration File

Initialize Tailwind CSS, which will create a tailwind.config.js file in your project:

npx tailwindcss init

Step 4: Create an Input CSS File

In the static/src/ directory, create an input.css file and add the following Tailwind directives:

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

This file will be the entry point for Tailwind CSS processing.

Step 5: Configure Tailwind CSS

Edit the tailwind.config.js file to ensure it processes all your HTML files. Here’s a basic configuration:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./templates/**/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

This tells Tailwind to purge unused styles from any HTML files within the templates/ directory.

Step 6: Build Tailwind CSS

Now you can compile your Tailwind CSS:

npx tailwindcss -i ./static/src/input.css -o ./static/src/output.css

For continuous development, use the watch command:

npx tailwindcss -i ./static/src/input.css -o ./static/src/output.css --watch

Step 7: Update package.json

For better workflow management, you can add scripts to your package.json:

{
  "name": "django.amankhalsa",
  "version": "1.0.0",
  "description": "Django",
  "main": "index.js",
  "scripts": {
    "dev": "npx tailwindcss -i ./static/frontend/styles/input.css -o ./static/frontend/styles/output.css --watch",
    "build": "npx tailwindcss -i ./static/frontend/styles/input.css -o ./static/frontend/styles/output.css"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.4.10"
  }
}

This allows you to run npm run dev during development and npm run build for production builds.