# Simple Django Tip #6

### Introduction

[Tailwind CSS](https://tailwindcss.com/) is something that I have been exploring for quite sometime. Once I got comfortable with tailwind, I did not want to go back to using plain old CSS. A few reasons why I started to prefer tailwind:

* It's very intuitive, more like writing in plain English
    
* CSS class definitions are mentioned directly in HTML, thus I find it easy to visualize and modify
    
* Any type of customization or design is easy to implement
    

I use Django a lot, thus the natural next step was to try using it in a Django project. I was quite wary of using it, especially I was not quite sure whether there will be hiccups while deploying it on cloud. Only after a fellow PDMer [Arno](https://de.linkedin.com/in/arnoan) shared his positive experience, I tried it and to my surprise, it was super simple to integrate in my local environment as well as in a cloud environment. Thanks Arno for the timely response, I'm now able to easily convert my design into web pages.

This post is not a typical tip, but a set of steps to integrate Tailwind with Django in a local environment. Let's get started.

### Install Django & Create a project

Let's perform the usual steps of creating a virtual environment, followed by installing Django, and creating a project.

```plaintext
py -m venv venv
pip install Django
django-admin startproject djangoandtailwind
```

### Install Tailwind CSS

In order to install Tailwind, the simplest approach that I find is using `npm`. If you do not have `npm` installed in your machine, you may want to perform that as a first step. Check their [documentation](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) for the steps to be performed.

Once `Node.js` and `npm` are installed, let's proceed with the steps required to install and configure Tailwind.

```javascript
npm install -D tailwindcss
npx tailwindcss init
```

On executing the above commands, we should have a `node_modules` folder in our workspace as well as the three files

`package-lock.json`

`package.json`

`tailwind.config.js`

### Configure `tailwind.config.js`

We then configure the path of the template files that will use tailwind.

```javascript
/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
  content: ["./djangoandtailwind/templates/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">By default, I create templates folder under the project folder. This is how my folder structure looks like at this point of time:</div>
</div>

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700066448634/afddd6a3-c5b5-4091-8e2a-50936760d391.png align="center")

### Add Tailwind directives to the main css

In the main project folder, create a folder `static` to hold the static assets of the project. Under `static` folder create a sub-folder `css`. Create a file and name it as `input.css`. Add the following directives there

```javascript
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### Start the Tailwind build process

In your IDE (I use Visual Studio Code), open a terminal and execute the command below so that we can scan the template files for classes and build the required css.

We mention the path of out `input.css` file and specify where the output should be generated, in this case `dist/output.css`. `--watch` parameter is for hot reload so that we need not run the build command manually whenever there is a change.

On executing the command, we should see a `dist` folder created under `static`

```javascript
npx tailwindcss -i ./djangoandtailwind/static/css/input.css -o ./djangoandtailwind/static/dist/output.css --watch
```

Now the folder structure looks like so 👇

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700067116555/ad3b80a5-dbd4-4394-b86e-7a0a019eab5c.png align="center")

### Add compiled css to our `base.html`

Below `html` is what I generally write that serves as the base for all htmls. It is good practice to extend such `base.html` in all other template files.

Notice the reference to `dist/output.css` in the `<head>` section.

```xml
{% load static %}

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="{% static 'dist/output.css' %}" rel="stylesheet">
  <title>{% block title %} {% endblock %}</title>
<body>
  {% block content %}

  {% endblock %}
</body>
</html>
```

Hooray 🥳, we are done with required configuration.

Let's now write a simple html and start using tailwind css. Just to keep things simple, I wrote the code for a `navbar` in `header.html`. I used a couple of tailwind classes.

```xml
<div class="m-8">
        <ul class="flex text-xl flex-row justify-center space-x-16">
            <li>
                <a class="text-xl text-green-400" href="#">Home</a>
            </li>
            <li>
                <a class="text-xl text-blue-400" href="#">Search</a>
            </li>
            <li>
                <a class="text-xl text-blue-400" href="#">Recap</a>
            </li>
            <li>
                <button class="bg-purple-300 p-2 rounded-lg font-satisfy text-xl border-font-semibold hover:bg-transparent hover:border-purple-100 hover:border-solid hover:border-2">Get Started for free</button>
            </li>
     </ul>
</div>
```

Finally a `home.html` where I simply included the required files and gave a `h1` tag and a `h3` tag.

```xml
{% extends "base\base.html" %}
{% load static %}

{% block title %} Django and Tailwind {% endblock %}
{% block content %}
    {% include "../base/header.html" %}
    <h1 class="p-20 text-4xl text-center text-green-500">A simple page using Tailwind!</h1>
    <h3 class="text-2xl text-center text-purple-700">Pretty impressive 😁</h3>
{% endblock %}
```

On starting the development server, this is how the home page looks like:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700125970024/e5c92918-4f7b-4fbb-8cfb-86d6bde01a6b.png align="center")

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Make sure to set the path for <code>static</code> related properties and <code>DIRS</code> under <code>TEMPLATES</code> folder like so 👇</div>
</div>

```python
STATIC_URL = "static/"

STATICFILES_DIRS = [BASE_DIR / "djangoandtailwind" / "static"]
```

```python
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        "DIRS": [os.path.join(BASE_DIR, "djangoandtailwind", "templates")],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
```

### Conclusion

As we can see, it's not a lot to integrate Tailwind in a Django project. Quite simple and straight forward. Once we have the design for a page in hand, even a back end developer will be able to easily define the CSS classes (Psstt..I'm a back end heavy person).

Do give it a try and let me know how it goes 🤩