Django Tailwind

El siguiente paso que vamos a querer es, ya finalmente, por los dioses, introducir alguna librería, alguna API (como lo quieras llamar), o algún framework para la parte del CSS. Usualmente empleo Bootstrap, pero para variar un poco, en este tipo de frameworks vamos a emplear Tailwind.

¿Por qué no he usado Tailwind antes?

¿Cuál es el problema que tenemos? Es un poco también lo que vamos a comentar al inicio.
Pero antes que nada, en caso de que no lo conozcas (porque vives debajo de una piedra), puedes buscar Tailwind en internet y ver exactamente qué es lo que nos ofrece.

¿Qué es Tailwind?

A la final, Tailwind —lo puedo definir yo (ya estas son palabras un poco mías)— es un montón de clases que nosotros podemos organizar, tal cual puedes ver aquí, donde en algún punto se reproduce la animación.

Son un montón de clases con las cuales podemos aplicar estilos. En otras palabras: todo lo que podemos hacer (me atrevo a decir todo) con CSS tradicional —variar texto, tamaño, color, fondo, margen, spacing y todo lo que existe— lo tenemos en Tailwind mediante clases con valores predefinidos.

Más que clases, tenemos reglas. Por ejemplo, si queremos definir algo como my-margin con un margen X, en Tailwind tenemos una clase que define hasta cierto punto esta regla.

Hasta cierto punto me refiero a que, por ejemplo, tú quieras colocar aquí 16px, pero no tenemos una clase con exactamente ese valor. Tailwind utiliza otras unidades —ahorita se me fue la memoria, no son píxeles, son de las otras cuatro unidades que se manejan— pero tenemos una forma de aplicar márgenes como mt-1, mt-6, etc.

Aquí puedes ver algunos ejemplos con márgenes y paddings:

mt-6 → margen superior nivel 6

p-2 → padding general nivel 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>

Tenemos ese tipo de jerga, por decirlo de alguna forma. Entonces, con esto todo es más modularizado.

¿Tailwind es un framework de componentes?

No, Tailwind no es un framework basado en componentes. Los componentes los tenemos que crear nosotros.

Por ejemplo, esta pantalla que estás viendo, yo la hice usando Tailwind para definir los colores, textos, etc. Ya sea bonita o no (como lo quieras definir), así funciona.

Entonces, sí, es muy utilizado. De hecho, Bootstrap ha pasado un poco a segundo plano. En Bootstrap estás obligado a quedarte con el estilo definido, o modificarlo de forma manual o sobreescribirlo.

Con Tailwind no tienes ese problema, porque al ser simplemente clases, tú mismo eres quien crea los componentes.
Claro, también puedes buscar en internet “Tailwind components” y ver un montón de ejemplos listos para usar (cartas, avatares, etc.).

Lo malo de Tailwind

Lo malo es que tenemos muchas clases y debemos trabajar de forma más manual:

<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>

Es feo al inicio, sí. Usualmente lo que yo hago es: en vez de poner todo en línea, defino una clase personalizada con la estructura.
Eso lo veremos más adelante.

Ya el video se fue un poquito largo introduciendo Tailwind, así que lo dejaremos para la próxima clase, donde vamos a instalar y configurar Tailwind en Django.

El problema con Tailwind y Django

A diferencia de Bootstrap, Tailwind no se lleva bien con frameworks como Django, y aquí te explico por qué:

Tailwind define todas las reglas posibles en CSS mediante clases. Entonces, ¿qué pasa si tú no usas ciertas clases como box-shadow o opacity?

Si usas CDN (como se hace con Bootstrap), todas esas clases igual se van a cargar, ocupando espacio y ralentizando el sitio.

Y eso es extremadamente ineficiente.

¿Cómo evitar ese problema?

La solución sería usar herramientas como Node.js, Vite, etc., para rastrear los archivos y purgar el CSS (eliminar lo que no usas).

En Django, no tenemos eso nativamente. A diferencia de Laravel, que sí incorpora un entorno con Node y facilita ese trabajo.

Por eso es que yo no suelo usar Tailwind con Django. Pero... tenemos algo especial:

Django Tailwind: la solución

Existe un paquete llamado Django-Tailwind, que permite integrar Tailwind a Django de forma más eficiente.

Puedes buscar “Django Tailwind” y acceder a su página oficial. Ahí verás los pasos de instalación.
Lo bueno es que permite purgar el CSS durante la fase de build para producción.

Veamos los pasos para integrarlo, primero, ejecutamos el siguiente comando:

$ pip install django-tailwind

Esto descargara el paquete y dependencias como:

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)

Configuramos a Tailwind como una app instalada:

En settings.py:

INSTALLED_APPS = [
   ***
   'tailwind',
]

Inicializamos el proyecto:

$ python manage.py tailwind init

Este comando descarga algunas dependencias adicionales:

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

Y crea una aplicación en Django al cual colocamos el nombre sugerido de ‘theme’:

32.4 rich-14.0.0 six-1.17.0 text-unidecode-1.3 types-python-dateutil-2.9.0.20250708 urllib3-2.5.0

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

Además pregunta para instalar algunos plugins que colocamos que no:

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

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

Aunque, puedes instalarlo si asi lo deseas, finalmente, tendremos una salida como la siguiente:

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:

En settings.py:

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

Registramos la aplicación generada anteriormente:

djangoshopping\djangoshopping\settings.py

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

Instalamos las dependencias de Tailwind CSS, en este caso, serian el CSS perse y dependencias:

$ python manage.py tailwind install

Si vez una salida como la siguiente:

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.

Significa que NO tienes Node instalado, específicamente NPM que es el manejador de paquete de Node y debes de instalarlo, para ello, puedes descargarlo de la web oficial:

https://nodejs.org/es/download

En caso de que lo tengas instalado pero no lo encuentra, por ejemplo, si lo tienes instalado mediante Laragon o Laravel Herd, debes de encontrar la ruta en tu sistema y lo configuras:

djangoshopping\djangoshopping\settings.py

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

Como comentamos antes, esta ruta es de ejemplo y es para cuando lo tienes configurado pero el paquete de django tailwind NO lo encontró, debes de reemplazar la ruta anterior con la que uses en tu sistema.

Finalmente, podemos emplear la siguiente etiqueta en nuestra plantilla maestra que es la que importa CSS internamente:

djangoshopping\blog\templates\master.html

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

Puedes inspeccionar el código fuente de la pagina al momento de ejecutar la aplicación, ver que no devuelva un 404 el estilo incorporado o algo similar y si todo funciona bien, veras que ahora el estilo cambia ligeramente y tendrás una etiqueta como la siguiente:

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

Que es tu Tailwind configurado en tu proyecto.

En producción, tenemos el siguiente comando para purgar el CSS:

$ python manage.py tailwind build

Como puedes apreciar si has trabajado con Tailwind, y la razon por la cual hicimos todos estos pasos para configurar Tailwind en nuestro proyecto, es porque nos interesa purgar el CSS que NO vamos a usar en producción, y para eso, es el comando anterior, de esta forma, tenemos un CSS justo que vamos a usar sin reglas adicionales que NO empleamos en nuestro proyecto y es por eso que usualmente NO empleamos Tailwind si el proyecto asociado NO emplea Node (como ocurre en el caso de Django, pero en Django tenemos el paquete configurado en este apartado); ya que, la opción de la CDN incorpora TODO el CSS del framework de Tailwind que NO queremos mantener para cuando lanzamos el proyecto a producción.

TailwindCCS Typography

Este plugin nos facilita el proceso extremadamente tedioso de tener que definir márgenes y el tamaño de texto a nuestros textos, que incluye los elementos H1..H6, aunque, podemos emplear la configuración que empleamos antes para los textos, resulta interesante mostrar una variante y que gracias a Django Tailwind disponemos de un proyecto en Node en Django y podemos extender al propio Tailwind de una manera relativamente sencilla, primero, nos posicionamos dentro de la aplicación que creamos que recuerda que llamamos como theme:

djangoshopping\theme\static_src

Dentro de la carpeta anterior es que se encuentran el package.json, lo que es un archivo fundamental para cualquier proyecto en Node y es por eso que es aquí donde debemos de realizarla instalación de los paquetes de Node.

Instalamos el paquete dentro del proyecto en Node de la app llamada theme que creamos, cuya ubicación seria este:

djangoshopping\theme\static_src

El la ubicación anterior, debes de ver archivos de un proyecto en Node como el package.json. Instalamos el paquete:

$ npm install -D @tailwindcss/typography

Agregamos la dependencia:

djangoshopping\theme\static_src\src\styles.css

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

Ahora, solo tenemos que agregar la clase de prose en las clases contenedoras de los textos.