How to Add Tailwind CSS to Django for Fast and Responsive Web Design

Django Tailwind

Learn how to seamlessly integrate Tailwind CSS into your Django project to create beautiful, responsive web designs. This step-by-step guide will help you quickly set up Tailwind and customize your app's UI with modern, mobile-first styles. Before we begin, make sure both Python and Node.js are installed on your machine.

Project Structure

Check out the full Django project structure we’ll be using in this guide here.

How to start Django

python -m venv env
source env/bin/activate

(.venv) $ django-admin startproject core 
(.venv) $ manage.py startapp app
(.venv) $ python `manage.py` migrate
(.venv) $ python `manage.py` runserver

How to start Tailwind

# Install tailwindcss and create your tailwind.config.js file 
npm install -D tailwindcss
npx tailwindcss init 

# Configure your template paths
module.exports = {
  content: ["../templates/**/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

# Create a styles.css file inside ./static/css/ to import Tailwind
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

# Add a script to package.json for building CSS
"build-css": "npx tailwindcss -i ../static/css/styles.css -o ../static/css/output.css --watch"

How to Add Tailwind CSS to Django

# Replace the Tailwind CSS link in templates/base.html with:
<link href="{% static 'css/output.css' %}" rel="stylesheet">

# Build the CSS
npm run build-css

0