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.
