Template listing hero section background

How to Use Tailwind CSS with Python Django?

Tailwind CSS blog | Published on : 23rd June, 2023

In recent years, Django has gained significant popularity as a powerful Python web framework, while Tailwind CSS has emerged as a flexible and utility-first CSS framework. Combining the two allows developers to build beautiful and responsive web applications efficiently. In this blog post, we will guide you through the process of setting up a Django app with Tailwind CSS, enabling you to create stunning user interfaces in no time.

Prerequisites:

Before we dive into the setup process, make sure you have the following prerequisites in place:

  • Python installed on your system (preferably version 3.6 or higher).
  • A basic understanding of Django and its project structure.
  • Familiarity with command-line interface (CLI) tools.

Step 1: Create a Django Project

To begin, let's create a new Django project. Open your terminal or command prompt and run the following command:

$ django-admin startproject myproject

This will create a new Django project named myproject Navigate to the project directory:

$ cd myproject

Step 2: Install Tailwind CSS

Next, we need to install Tailwind CSS and its dependencies. In your terminal, run the following commands:

$ pip install django-webpack-loader
$ npm init -y
$ npm install tailwindcss postcss autoprefixer

Step 3: Configure Tailwind CSS

After installing Tailwind CSS, we need to configure it for our Django project. Create a new file named tailwind.config.js in your project's root directory and add the following content:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Step 4: Create PostCSS Configuration

Create a new file named postcss.config.js in the project's root directory and include the following content:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Step 5: Update Django Settings

In your Django project, open the settings.py file and modify the INSTALLED_APPS and STATICFILES_DIRS settings as follows:

INSTALLED_APPS = [
    # ...
    'webpack_loader',
]

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

Step 6: Update Django URLs

Open the urls.py file in your Django project and add the following code:

from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    # ...
    path('', TemplateView.as_view(template_name='index.html')),
]

Step 7: Create Base HTML Template

Create a new file named base.html in the templates directory of your Django project. Add the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'styles.css' %}">
    <title>My Django App</title>
</head>
<body>
    {% block content %}
    {% endblock %}

    <script src="{% static 'main.js' %}"></script>
</body>
</html>

Step 8: Create a Home Page

Create a new file named index.html in the templates directory and extend the base.html template. Update its content to suit your needs.

Step 9: Compile Assets

In your terminal, run the following command to compile the assets using Tailwind CSS:

$ npx tailwindcss-cli@latest build -o static/styles.css

Step 10: Run the Django Development Server

Finally, start the Django development server by running the following command:

$ python manage.py runserver

The server will now serve your Django application with Tailwind CSS styles.

That's it! You have successfully integrated Tailwind CSS into your Python Django project. You can now use Tailwind CSS utility classes and components in your HTML templates.

Read more about How to implement dark theme to Tailwind CSS project.

Colorfull background image for highlight footer
TailwindTap
Our team is creating and sharing useful resources on a regular basis and thousands of developers are using Tailwind CSS to create amazing websites with TailwindTap's free open-source pre-made components and templates.

Hire Tailwind CSS Developers

TailwindTap FacebookTailwindTap TwitterLinkedinInstagram