Django in Tailwind

▶

The next step we'll want to take is, finally, for the gods' sake, to introduce some library, some API (whatever you want to call it), or some framework for the CSS part. I usually use Bootstrap, but for a change, for this type of framework, we're going to use Tailwind.

Why haven't I used Tailwind before?

What's the problem we have? It's also something we were going to discuss at the beginning.
But first, in case you're unfamiliar with it (because you're living under a rock), you can search for Tailwind online and see exactly what it offers.

What is Tailwind?

In the end, Tailwind—I can define it myself (these are my own words)—is a bunch of classes that we can organize, just as you can see here, where the animation plays at some point.

They're a bunch of classes with which we can apply styles. In other words: everything we can do (I dare say everything) with traditional CSS—varying text, size, color, background, margin, spacing, and everything else—we have in Tailwind through classes with predefined values.

More than classes, we have rules. For example, if we want to define something like my-margin with an X margin, in Tailwind we have a class that defines this rule to a certain extent.

To a certain extent, I mean, for example, you want to set 16px here, but we don't have a class with exactly that value. Tailwind uses other units—I'm running out of memory right now, they're not pixels, they're one of the other four units used—but we have a way to apply margins like mt-1, mt-6, etc.

Here are some examples with margins and padding:

mt-6 → top margin level 6

p-2 → general padding level 2

<div class="mt-6 ...">mt-6</div>
<div class="mr-4 ...">mr-4</div>
<div class="pt-6 ...">mt-6</div>
<div class="pr-4 ...">mr-4</div>

We have that kind of jargon, so to speak. So, with this, everything is more modular.

¿Tailwind es un framework de componentes?

No, Tailwind is not a component-based framework. We have to create the components ourselves.

For example, this screen you're looking at, I created it using Tailwind to define the colors, text, etc. Whether it's pretty or not (however you want to define it), that's how it works.

So, yes, it's widely used. In fact, Bootstrap has somewhat taken a backseat. In Bootstrap, you're forced to stick with the defined style, or modify it manually or override it.

With Tailwind, you don't have that problem because, since they're simply classes, you're the one who creates the components yourself.
Of course, you can also search the internet for "Tailwind components" and see tons of ready-to-use examples (cards, avatars, etc.).

The bad thing about Tailwind

The bad thing is that we have many classes and we have to work more manually:

<div class="flex flex-col items-center p rounded-2xl">
  <div>
    <img class="size-48 shadow-xl" alt="" src="/img/cover.png" />
  </div>
  <div class="flex">
    <span>Class Warfare</span>
    <span>The Anti-Patterns</span>
    <span class="flex">
      <span>No. 4</span>
      <span>·</span>
      <span>2025</span>
    </span>
  </div>
</div>

It's ugly at first, yes. What I usually do is: instead of putting everything inline, I define a custom class with the structure.
We'll cover that later.

The video got a bit long introducing Tailwind, so we'll save that for the next class, where we'll install and configure Tailwind in Django.

The problem with Tailwind and Django

Unlike Bootstrap, Tailwind doesn't play well with frameworks like Django, and here's why:

Tailwind defines all possible CSS rules using classes. So what happens if you don't use certain classes like box-shadow or opacity?

If you use a CDN (as Bootstrap does), all those classes will still load, taking up space and slowing down the site.

And that's extremely inefficient.

How to avoid this problem?

The solution would be to use tools like Node.js, Vite, etc., to crawl files and purge CSS (remove what you don't use).

In Django, we don't have that natively. Unlike Laravel, which does incorporate a Node framework and makes that work easier.

That's why I don't usually use Tailwind with Django. But... we do have something special:

Django Tailwind: The Solution

Let's see the steps to integrate it, first, we execute the following command:

$ pip install django-tailwind

This will download the package and dependencies as:

Collecting django-tailwind
  Downloading django_tailwind-4.2.0-py3-none-any.whl.metadata (4.4 kB)
Requirement already satisfied: django>=4.2.20 in c:\users\andre\desktop\proy\django\curso\.venv\lib\site-packages (from django-tailwind) (5.2.4)
Requirement already satisfied: asgiref>=3.8.1 in c:\users\andre\desktop\proy\django\curso\.venv\lib\site-packages (from django>=4.2.20->django-tailwind) (3.9.1)
Requirement already satisfied: sqlparse>=0.3.1 in c:\users\andre\desktop\proy\django\curso\.venv\lib\site-packages (from django>=4.2.20->django-tailwind) (0.5.3)
Requirement already satisfied: tzdata in c:\users\andre\desktop\proy\django\curso\.venv\lib\site-packages (from django>=4.2.20->django-tailwind) (2025.2)
Downloading django_tailwind-4.2.0-py3-none-any.whl (19 kB)

We configure Tailwind as an installed app in settings.py:

INSTALLED_APPS = [
   ***
   'tailwind',
]

We initialize the project:

$ python manage.py tailwind init

This command downloads some additional dependencies:

Collecting cookiecutter
  Downloading cookiecutter-2.6.0-py3-none-any.whl.metadata (7.3 kB)
Collecting binaryornot>=0.4.4 (from cookiecutter)
  Downloading binaryornot-0.4.4-py2.py3-none-any.whl.metadata (6.0 kB)
Collecting Jinja2<4.0.0,>=2.7 (from cookiecutter)
  Downloading jinja2-3.1.6-py3-none-any.whl.metadata (2.9 kB)
Collecting click<9.0.0,>=7.0 (from cookiecutter)
  Downloading click-8.2.1-py3-none-any.whl.metadata (2.5 kB

And create an application in Django to which we give the suggested name of ‘theme’:

  [1/2] Your Tailwind app/theme name (theme): theme
  [1/2] Your Tailwind app/theme name (theme): theme

It also asks to install some plugins that we put in that are not:

  [2/2] Include daisyUI plugin?
    1 - no
    2 - yes

   Choose from [1/2] (1): 1

Although, you can install it if you wish, finally, we will have an output like the following:

Tailwind application 'theme' has been successfully created. Please add 'theme' to INSTALLED_APPS in settings.py, then run the following command to install Tailwind CSS dependencies: `python manage.py tailwind install`

Configuramos la aplicación generada anteriormente:

In settings.py:

INSTALLED_APPS = [
   ...
   'tailwind',
   'theme',  # nombre que pondrás a tu app Tailwind personalizada
   ...
]

We register the application generated previously:

djangoshopping\djangoshopping\settings.py

INSTALLED_APPS = [
   ***
   'tailwind',
   'theme',
]
TAILWIND_APP_NAME = 'theme'

We install the Tailwind CSS dependencies, in this case, they would be the CSS itself and dependencies:

$ python manage.py tailwind install

If you see an output like this:

It looks like node.js and/or npm is not installed or cannot be found.

Visit https://nodejs.org to download and install node.js for your system.

If you have npm installed and still getting this error message, set NPM_BIN_PATH variable in settings.py to match path of NPM executable in your system.

It means that you DO NOT have Node installed, specifically NPM which is the Node package manager and you must install it, to do so, you can download it from the official website:

https://nodejs.org/es/download

In case you have it installed but can't find it, for example, if you have it installed through Laragon or Laravel Herd, you must find the path on your system and configure it:

djangoshopping\djangoshopping\settings.py

NPM_BIN_PATH = "C:/Users/andre/.config/herd/bin/nvm/v23.11.0/npm.cmd"

As we mentioned before, this route is an example and is for when you have it configured but the django tailwind package didn't find it. You must replace the previous route with the one you use on your system.

Finally, we can use the following tag in our master template, which imports CSS internally:

djangoshopping\blog\templates\master.html

{% load static tailwind_tags %}
...
<head>
   ...
   {% tailwind_css %}
   ...
</head>

You can inspect the source code of the page when running the application, see that the built-in style or something similar does not return a 404 and if everything works well, you will see that the style now changes slightly and you will have a label like the following:

<link rel="stylesheet" type="text/css" href="/static/css/dist/styles.css?v=<V>">

What is your Tailwind configured in your project.

In production, we have the following command to purge CSS:

$ python manage.py tailwind build

As you can see if you have worked with Tailwind, and the reason why we did all these steps to configure Tailwind in our project, is because we are interested in purging the CSS that we are NOT going to use in production, and for that, is the previous command, this way, we have a fair CSS that we are going to use without additional rules that we DO NOT use in our project and that is why we usually DO NOT use Tailwind if the associated project DOES NOT use Node (as is the case with Django, but in Django we have the package configured in this section); since, the CDN option incorporates ALL the CSS of the Tailwind framework that we DO NOT want to keep for when we launch the project to production.

TailwindCCS Typography

▶

This plugin makes the extremely tedious process of having to define margins and text size for our texts easier, which includes the H1..H6 elements, although we can use the same configuration that we used before for the texts, it is interesting to show a variant and that thanks to Django Tailwind we have a Node project in Django and we can extend Tailwind itself in a relatively simple way, first, we position ourselves within the application that we created that remembers that we call as a theme:

djangoshopping\theme\static_src

Inside the above folder is the package.json file, which is a fundamental file for any Node project. This is where we should install the Node packages.

We install the package inside the Node project of the app called "theme" we created, located here:

djangoshopping\theme\static_src

In the previous location, you should see files from a Node project, such as package.json. We install the package:

$ npm install -D @tailwindcss/typography

We add the dependency:

djangoshopping\theme\static_src\src\styles.css

 @import "tailwindcss";
+ @plugin "@tailwindcss/typography";

Now, we just need to add the prose en the text container elements.