Setting up Tailwindcss with Django: Easy Guide

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

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: [],
};

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: {},
  }
}

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;

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"
  },

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">

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

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")]

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

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

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

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",
    ...,
]

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")),
]

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",
    # ...
]

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!

Comments

[Muhammad Bachal]

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