DEV Community

Taiwo Jazz
Taiwo Jazz

Posted on • Updated on

Setting up Tailwindcss with Django: Easy Guide

Image description

In this tutorial, we will walk through the process of setting up Tailwind CSS to work globally for all apps within your Django project. Assuming you have already created your Django project and app, let's dive straight into it.

Step 1: Installing Tailwind CSS

Begin by navigating to your project's root directory, where your manage.py file resides. Execute the following commands to install Tailwind CSS, along with its necessary dependencies, PostCSS, and Autoprefixer:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

These commands will install TailwindCSS, PostCSS, Autoprefixer and generate a tailwind.config.js default configuration file.

Step 2: Configuring TailwindCSS

You should now have a tailwind.config.js file in your project's root directory. Replace its contents with the following code:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app-name/templates/app-name/**/*.html',
    // Add paths to other apps if necessary
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

Make sure to replace app-name with your actual app name. If your project includes multiple apps, add the respective paths to their templates.

Step 3: Configuring Postcss

In your project's root directory, create a new file named postcss.config.js and paste the following code inside it:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Add the Tailwind directives to your CSS

Create a directory named static in your root directory. Inside this directory, create another directory named src, and within it, create a file named input.css. Add the following code to input.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Step 5: Update your package.json

Locate your package.json file in the root directory, and add the following line at the top of the devDependencies object:

"scripts": {
    "dev": "npx tailwindcss -i ./static/src/input.css -o ./static/src/styles.css --watch"
  },
Enter fullscreen mode Exit fullscreen mode

Your package.json should look like this

Step 6: Update your app templates layout.html or base.html

In your app's templates directory, where your .html files are located, update the head section of your layout.html or base.html file with the following code. This ensures that your stylesheet points to the CSS files generated by Tailwind when you start the server:

<link href="{% static 'src/styles.css' %}" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

Your layout.html shoudl look like this

Step 7: Update Django settings

In your settings.py file, follow these steps:

1. Import the os Module

Add the following code at the top of your settings.py file, typically around line 13:

import os
Enter fullscreen mode Exit fullscreen mode

This import is necessary to work with file paths.

2. Configure Static Files Directory

Locate the STATIC_URL declaration in your settings.py file (usually at the bottom of the page), and then add the following code right below it:

STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
Enter fullscreen mode Exit fullscreen mode

Your settings.py file should now include the updated STATICFILES_DIRS configuration, ensuring that Django knows where to find your static files.
Your code should look like this

With these changes, your Django project is configured to recognize the static directory as a source of static files. This is crucial for serving the CSS generated by Tailwind CSS. Save your settings.py file, and you're all set.

Step 8: Now open a new terminal aside the one running your django server and run:

npm run dev
Enter fullscreen mode Exit fullscreen mode

With these steps completed, you have successfully set up Tailwind CSS to work globally for all apps in your Django project. Enjoy creating stylish and responsive user interfaces for your Django applications.

Implementing Auto-Reload in Django

If you find manual page reloading tedious while working on your Django project, you can set up automatic page reloads whenever your server code, templates, content, or classes change. Here's how to do it:

Step 1: Install django-browser-reload

Start by installing django-browser-reload using pip:

python -m pip install django-browser-reload
Enter fullscreen mode Exit fullscreen mode

Step 2: Add django-browser-reload to your INSTALLED_APPS:

In your Django project's settings, locate the INSTALLED_APPS list and add django_browser_reload to it:

INSTALLED_APPS = [
    ...,
    "django_browser_reload",
    ...,
]
Enter fullscreen mode Exit fullscreen mode

Your INSTALLED_APPS should look like this

Step 3: Include the App URLs

Extend your project's URL configuration to include the django-browser-reload app's URLs. In your project's main urls.py (usually located in the project's root directory), add the following:

from django.urls import include, path

urlpatterns = [
    ...,
    path("__reload__/", include("django_browser_reload.urls")),
]
Enter fullscreen mode Exit fullscreen mode

Your urlpatterns should look like this

This step ensures that the auto-reloading functionality is accessible at the __reload__/ endpoint of your Django project.

Step 4: Add the middleware:

In your project's settings, locate the MIDDLEWARE list and add django_browser_reload.middleware.BrowserReloadMiddleware to it. Make sure to place it after any other middleware that encodes the response, such as Django's GZipMiddleware.

MIDDLEWARE = [
    # ...
    "django_browser_reload.middleware.BrowserReloadMiddleware",
    # ...
]
Enter fullscreen mode Exit fullscreen mode

Your MIDDLEWARE should look like this

With these steps completed, your Django project is now set up to automatically reload the page whenever there are changes in your server code, templates, content, or classes.

Enjoy a more streamlined development experience with automatic page reloading!

Top comments (1)

Collapse
 
m_bachal profile image
Muhammad Bachal

Thanks, i tried and it works in development but now i want to host my project. What will be the steps?