Setting up Tailwindcss with Django: Easy Guide
Published: 2023-09-07 13:50:57

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1nror3ojxueltjyrffb.png)

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:

```javascript
/** @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:

```javascript
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:

```javascript
"scripts": {
    "dev": "npx tailwindcss -i ./static/src/input.css -o ./static/src/styles.css --watch"
  },
```
![Your package.json should look like this](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qq7ijf20usref1683dv4.png)

### 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:

```html
<link href="{% static 'src/styles.css' %}" rel="stylesheet">
```
![Your layout.html shoudl look like this](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yobs7ovav55f44ch59ww.png)



### 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:

```python
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.
![Your code should look like this](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unrdl0pfc8nz8nagf7ui.png)


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:

```python
INSTALLED_APPS = [
    ...,
    "django_browser_reload",
    ...,
]
```
![Your INSTALLED_APPS should look like this](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xrk70qxza4ghvs2q1oh.png)

### 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:

```python
from django.urls import include, path

urlpatterns = [
    ...,
    path("__reload__/", include("django_browser_reload.urls")),
]
```
![Your urlpatterns should look like this](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tstruk55dokc1qj144he.png)

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`.

```python
MIDDLEWARE = [
    # ...
    "django_browser_reload.middleware.BrowserReloadMiddleware",
    # ...
]
```
![Your MIDDLEWARE should look like this](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mksf8zx94pvqaidejmeu.png)

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!