Designing a product detail page for a Django e-commerce store with Tailwind CSS is a great way to build a modern, responsive, and highly customizable front-end with minimal effort. This tutorial will walk you through the key steps, from setting up your Django project to styling the page with Tailwind's utility-first approach.

This guide assumes you have a basic Django project with a products app and a Product model already created.

Step 1: Integrate Tailwind CSS into Your Django Project
Before you can design the page, you need to properly set up Tailwind CSS. The most common and recommended method is to use a build process with Node.js.

Install Tailwind: Navigate to your Django project root in your terminal and initialize a Node.js project.

Bash

npm init -y
npm install -D tailwindcss
npx tailwindcss init
Configure Tailwind: Open tailwind.config.js and tell Tailwind which files to scan for classes. This is crucial for the framework to generate only the CSS you use.

JavaScript

module.exports = {
  content: [
    './templates/**/*.html',
    './**/templates/**/*.html',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Create Your CSS File: In your static directory, create a css/main.css file and add the Tailwind directives.

CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
Add a Watch Script: In package.json, add a script that will watch your Django templates for changes and compile the Tailwind CSS.

JSON

"scripts": {
  "watch:css": "tailwindcss -i ./static/css/main.css -o ./static/css/output.css --watch"
}
Link the CSS in Django: In your base template (base.html), link to the output.css file.

HTML

{% load static %}
<link href="{% static 'css/output.css' %}" rel="stylesheet">
Now, run npm run watch:css in your terminal to start the Tailwind watcher, and in a separate terminal, run your Django server.

Step 2: Set Up the Django Product Detail View
You need a view to handle the logic of fetching the product and passing it to the template.

In your products/views.py:

Python

from django.shortcuts import render, get_object_or_404
from .models import Product

def product_detail(request, slug):
    product = get_object_or_404(Product, slug=slug, available=True)
    return render(request, 'products/product_detail.html', {'product': product})
In your products/urls.py:

Python

from django.urls import path
from . import views

app_name = 'products'

urlpatterns = [
    # Other URLs
    path('<slug:slug>/', views.product_detail, name='product_detail'),
]
Step 3: Design the Product Detail Page with Tailwind CSS
Now for the fun part: writing the HTML with Tailwind classes. Create a new file at products/templates/products/product_detail.html.

This example creates a responsive, two-column layout for desktop that stacks vertically on mobile. It includes a product image gallery, a title, description, and an add-to-cart button.

HTML

{% extends 'base.html' %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="bg-white rounded-lg shadow-lg overflow-hidden md:flex">

        <div class="md:w-1/2 p-6">
            <img src="{{ product.image.url }}" alt="{{ product.name }}" class="w-full h-auto rounded-lg shadow-md mb-4">
            </div>

        <div class="md:w-1/2 p-6 flex flex-col justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ product.name }}</h1>
                <p class="text-lg text-gray-600 mb-4">{{ product.category }}</p>

                <p class="text-4xl font-extrabold text-indigo-600 mb-4">${{ product.price }}</p>
                <p class="text-gray-700 leading-relaxed mb-6">{{ product.description }}</p>
            </div>

            <div class="mt-auto">
                <form action="{% url 'cart:add_to_cart' product.id %}" method="post">
                    {% csrf_token %}
                    <button type="submit"
                            class="w-full bg-indigo-600 text-white font-semibold py-3 px-6 rounded-lg hover:bg-indigo-700 transition-colors duration-300">
                        Add to Cart
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
Explanation of Tailwind Classes Used
container mx-auto px-4 py-8: Creates a centered, responsive container with horizontal and vertical padding.

bg-white rounded-lg shadow-lg: Styles the main content card with a white background, rounded corners, and a drop shadow.

md:flex: Uses a mobile-first approach. The layout will be a single column on small screens and switch to a flexible two-column layout on medium screens and up.

md:w-1/2: Divides the content into two equal-width columns on medium screens and up.

text-3xl font-bold text-gray-900: Utility classes for typography, setting the font size, weight, and color.

w-full bg-indigo-600 text-white: Styles the button to be full-width, with an indigo background and white text.

hover:bg-indigo-700: A hover utility class that changes the button's background color on hover, adding a smooth transition.

This template provides a solid, modern foundation. You can easily add more features like product variations, reviews, or a carousel using the same utility-first approach.