No Time Dad

A blog about web development written by a busy dad

Adding Tailwindcss to a Django Project

Intro

I thought the instructions for getting started with Tailwindcss were a slightly confusing, and instructions for using it in a Django project mostly don’t exist (maybe for a reason…more on that later). So, I’ll write up my own here and hopefully it helps someone out.

I am going to assume that you have an existing Django project with an app and a static folder somewhere. If you don’t have these things then I recommend reading about managing static files in Django.

Installing Tailwindcss

We are going to use npm to install Tailwindcss, which means that we are going to be adding a node_modules directory somewhere. There are some good places and bad places to put this directory in a Django project.

Bad place: inside the static directory. You might accidently serve the node_modules directory, which would be very bad.

Good place: inside the project root directory next to manage.py.

  1. From the project root directory, create a package.json file
npm init -y
  1. Install Tailwind and other dependencies
npm install tailwindcss@latest postcss@latest autoprefixer@latest postcss-cli@latest
  1. Create a postcss config file and add Tailwind as a plugin
touch postcss.config.js
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
  1. Create the Tailwindcss config file
npx tailwindcss init

Adding Tailwindcss to a Django App

Things get a little interesting here as we “build” the css in our app’s static directory.

  1. In your app’s static directory, we’ll create a file called styles.css and populate it with the below.
/* ./your_project/your_app/static/css/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Update package.json to include a script command for building the Tailwindcss in your app’s static directory
// package.json
...
scripts {
  ...
  "build-my_app:css": "./node_modules/postcss-cli/bin/postcss ./my_project/my_app/static/css/styles.css -o ./my_project/my_app/static/css/compiled.css",
  ...
}
...
  1. Run the npm scripts command from the project root to create the tailwindcss file called compiled.css (named in the previous step)
npm run script build-my_app:css
  1. Add compiled.css to your base template (or any template).
<!DOCTYPE html>
<html lang="en">
  <head>
    {% load static %}
    <link
      rel="stylesheet"
      type="text/css"
      href="{% static  'my_app/css/compiled.css' %}"
    />
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>
  1. (optional but important) When building for production, update your NODE_ENV variable to “production” so postcss will remove all unused css from the massive compiled.css file.
export NODE_ENV=production

Thoughts

I am still pretty new to Tailwindcss, but I really like the idea of it. I am just not convinced yet that it is a good fit for Django. Tailwind’s whole thing is that they don’t want you to be creating lots of css files and instead just use their utility classes. That is all well and good, but you are going to be repeating alot of the utility classes all over your templates and I can see how it could quickly become very tedious to maintain.

I can see where web frameworks like React, and Vue would shine with Tailwindcss because they allow you to create reusable components so you have less css to maintain, but Django doesn’t really have the concept of reusable components so I think it might be a struggle. Tailwindcss does have a built-in feature called @apply that lets you extract common styles into your own css class. I could see this working with Django, but it might be a slippery slope back to lots of css files.

Anyways, I really just need to spend more time with Tailwindcss to get a clearer picture of how it could work together with Django. I do like what I see so far.