Configuring The Ultimate Django/Tailwind Experience (without Node)
Tags: django, tailwindcss, python, webdev
Published: 2022-03-03 21:34:46

Tailwind is all over the place, it has gained quite a lot of traction in the last years. I was hesitant at first but it eventually grew into me and here we are!

> TLDR: If you want to skip this post just clone the final boilerplate [here](https://github.com/Eric-Luna/django-tailwind-boilerplate) and follow the installation instructions.
> 

Previously, if you wanted to use Tailwind on Django you had to have Node.js and npm installed to use it.

NPM is not common in Django’s ecosystem so installing Tailwind came with a bunch of headaches but those days are gone.

[Adam](https://twitter.com/adamwathan) and his amazing team at Tailwind Labs recently released Tailwind’s Standalone CLI, a self-contained executable that you can use just like the regular Tailwind’s CLI but without Node.

## Getting Started

Go to your Django’s project directory and grab the executable for your platform from the [latest release](https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.23) on GitHub, making sure to give it executable permissions:

```bash
# Example for macOS arm64
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
mv tailwindcss-macos-arm64 tailwindcss
```

On your `static/css` folder create a file called `input.css` and add these directives:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Then create a file called `output.css`. Leave that empty (the CLI will take care of this) and import this asset on your template:

```html
<!-- home.html -->
...
<link rel="stylesheet" type="text/css" href="{% static 'css/output.css' %}">
...
```

Now let’s create a `tailwind.config.js` file using the CLI:

```bash
./tailwindcss init
```

That’s the file you will be editing if you want to override or extend the default Tailwind config. You can read more about it [here](https://tailwindcss.com/docs/configuration).

The first config setting that we are going to use is `content`.

We will pass a path to the files that we want to watch for Tailwind classes. 

```jsx
module.exports = {
  content: ["./django_tailwind_boilerplate/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

With the above setup, we are telling the CLI watcher to check every `.html` and `.js` file in the project.

> ⚠️ You should never conditionally construct utility classes. Doing this (``’text-${hasError ? ‘red’ : ‘green’}-400``) because it will prevent the watcher from picking up the styles.
To fix this example do: `{hasError ? ‘text-red-400’ : ‘text-green-400’}`.
> 

Now run the CLI watcher:

```bash
./tailwindcss -i static/css/input.css -o static/css/output.css --watch
```

You will notice that `output.css` now has a [Tailwind’s preflight](https://tailwindcss.com/docs/preflight) (a CSS reset). This will help you address cross-browser inconsistencies and start a project with a good set of default CSS attributes.

We can add any of Tailwind utility classes to our templates and the watcher will immediately add it to `output.css`

```html
<!-- home.html -->
...
<body>
  <main class="flex items-center justify-center w-full h-screen">
    <h1 class="text-4xl text-[#51BE95] font-mono">Hello Tailwind</h1>
  </main>
</body>
```

```css
// output.css
// preflight classes

.static {
  position: static;
}

.flex {
  display: flex;
}

.h-screen {
  height: 100vh;
}

.w-full {
  width: 100%;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-\[\#51BE95\] {
  --tw-text-opacity: 1;
  color: rgb(81 190 149 / var(--tw-text-opacity));
}
```

## ⭐Bonus Tip

Django will restart the server on every change on `.py` files but if you want to see your changes on template files you will need to reload your browser.

To improve that experience, install [django-browser-reload](https://github.com/adamchainz/django-browser-reload). After that, any changes you make on a template will be immediately reflected on your browser. It’s pretty much like having React’s hot module reloading at your disposal!

Get the boilerplate to start your next Django project with Tailwind [here](https://github.com/Eric-Luna/django-tailwind-boilerplate). (django-browser-reload included!)