TheLazy.Dev
Portfolio GitHub

Blog

django |tailwindcss |python |webdev

Configuring The Ultimate Django/Tailwind Experience (without Node)

ericlunadev

Eric Luna

Posted on March 3, 2022

Configuring The Ultimate Django/Tailwind Experience (without Node)

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 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 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 on GitHub, making sure to give it executable permissions:

# 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
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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

./tailwindcss init
Enter fullscreen mode Exit fullscreen mode

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.

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.

module.exports = {
  content: ["./django_tailwind_boilerplate/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

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:

./tailwindcss -i static/css/input.css -o static/css/output.css --watch
Enter fullscreen mode Exit fullscreen mode

You will notice that output.css now has a Tailwind’s 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

<!-- 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>
Enter fullscreen mode Exit fullscreen mode 
// 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));
}
Enter fullscreen mode Exit fullscreen mode

⭐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. 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. (django-browser-reload included!)

💖 💪 🙅 🚩
ericlunadev
Eric Luna

Posted on March 3, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Configuring The Ultimate Django/Tailwind Experience (without Node)
django Configuring The Ultimate Django/Tailwind Experience (without Node)

March 3, 2022