Incorporar Tailwind CSS en Django 6

▶

Integrar Tailwind CSS en Django 6 es una de esas cosas que parecen sencillas… hasta que empiezas a preparar el proyecto para producción.
En mi caso, durante mucho tiempo opté por Bootstrap sin pensarlo demasiado. Funcionaba, venía listo y Django no se quejaba. Pero cuando necesitas control total del diseño, Bootstrap empieza a estorbar más de lo que ayuda.

Ahí es donde entra Tailwind CSS. El problema no es Tailwind. El problema es cómo encaja (o no) con Django.

En este artículo te voy a explicar cómo usar Tailwind CSS en Django 6 de forma correcta, qué errores evitar y qué opciones reales existen hoy, incluyendo una alternativa moderna sin Node.js que cambia bastante el panorama.

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 CSS lo cual es ideal para maquetar nuestro sistema de Autenticación del backend personalizado en Django.

Por qué Tailwind CSS se ha vuelto tan popular (y por qué no lo usaba en Django)

Si no conoces Tailwind CSS, probablemente vivas debajo de una piedra .
Básicamente, Tailwind no es un framework de componentes como Bootstrap, sino un sistema de utilidades: clases pequeñas y predefinidas que aplican estilos directamente en el HTML.

En lugar de escribir CSS tradicional, haces cosas como:

• mt-6 → margen superior
• p-2 → padding
• text-xl, bg-gray-900, rounded-xl, etc.

En mi experiencia, esto hace que el diseño sea:

• Más rápido de prototipar
• Más consistente
• Mucho más flexible

Pero durante años evité usar Tailwind con Django. ¿La razón? El flujo de trabajo no encajaba bien… y en producción era un dolor.

Qué es realmente Tailwind CSS y cómo funciona

Tailwind CSS funciona generando todas las clases posibles que podrías necesitar: colores, márgenes, tipografías, sombras, opacidades, layouts, etc.

Eso tiene una consecuencia importante:

Si usas Tailwind por CDN, te llevas TODO el CSS, incluso lo que no usas.

Y eso, en producción, es inaceptable.

En proyectos reales, Tailwind debe:

• Analizar tus templates
• Detectar qué clases usas
• Purgar (eliminar) todo lo demás
• Generar un CSS final pequeño y optimizado

Ahí es donde empiezan los problemas con Django.

¿Qué es Tailwind CSS?

A la final, Tailwind CSS (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 CSSes un framework de componentes?

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

Lo malo de Tailwind CSS

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 CSS, así que lo dejaremos para la próxima clase, donde vamos a instalar y configurar Tailwind CSS en Django.

El verdadero problema entre Tailwind CSS y Django

Django no trae de serie un entorno de build para frontend.

No hay Node, no hay npm, no hay Vite, no hay nada.

Y Tailwind sí necesita un proceso de build si quieres usarlo bien.

Por eso, durante mucho tiempo, la integración típica implicaba:

• Instalar Node
• Configurar npm
• Compilar CSS aparte
• Sincronizar eso con collectstatic

Funciona, sí.

Pero es fricción innecesaria, especialmente si vienes a Django buscando simplicidad.

Por qué usar Tailwind vía CDN es una mala idea en Django

Esto es importante decirlo claro: usar Tailwind por CDN en Django es mala práctica.

¿Por qué?

• Cargas un CSS enorme (megabytes)
• El navegador compila Tailwind en tiempo real
• No hay purgado
• Dependencia externa
• Peor rendimiento

Para desarrollo rápido puede servir, pero no es una opción real para producción.

Opciones reales para usar Tailwind CSS en Django 6

Hoy tenemos tres enfoques reales, cada uno con sus pros y contras.

Usar Tailwind CSS con Node y npm (enfoque clásico)

Es el enfoque más conocido:

• Instalas Node.js
• Configuras Tailwind
• Compilas CSS con npm scripts
• Sirves el archivo estático en Django

Ventajas:

• Control total
• Ecosistema completo de Tailwind

Desventajas:

• Añade Node a un proyecto que no lo necesitaba
• Más complejidad
• Más puntos de fallo

Este enfoque lo ves mucho en artículos “production-grade”, pero no es el más elegante para Django puro.

Django Tailwind: integración tradicional con Node

Aquí entra django-tailwind, una librería bastante popular.

Lo bueno:

• Integra Tailwind dentro del proyecto Django
• Permite purgar CSS
• Flujo más Django-friendly

Lo malo (desde mi experiencia):

• Sigue dependiendo de Node
• Si Node no está bien configurado, todo se rompe
• No siempre es ideal en entornos simples o educativos

Durante mucho tiempo, esta fue “la solución”. Pero hoy ya no es la única.

Django Tailwind CLI: Tailwind sin Node en Django

Aquí es donde la cosa se pone interesante.

django-tailwind-cli utiliza el Tailwind CSS CLI standalone, sin npm, sin webpack, sin Node.js.

Y esto cambia totalmente el juego.

Características clave:

• ❌ No requiere Node.js
• ⚡ Setup en minutos
• Hot reload integrado
• Build optimizado con purgado automático
• Soporte para DaisyUI
• Pensado específicamente para Django

En proyectos Django 6 modernos, esta es mi recomendación por defecto si no quieres meter Node solo por Tailwind.

Cuándo usar django-tailwind y cuándo django-tailwind-cli

Mi criterio práctico es este:

• Usa django-tailwind-cli si:
  • No quieres Node
  • Tu frontend vive en templates Django
  • Buscas simplicidad y rendimiento
• Usa django-tailwind si:
  • Ya usas Node en el proyecto
  • Tienes tooling frontend complejo
  • Compartes Tailwind con otros frameworks

No hay dogmas. Hay contexto.

El problema con Tailwind CSS y Django

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

Tailwind CSS 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 CSS con Django. Pero... tenemos algo especial que hablamos en el siguiente apartado

Django Tailwind CSS: la solución

Existe un paquete llamado Django-Tailwind CSS, que permite integrar Tailwind CSS 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.

Extra: Tailwind CCS 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.

Cuándo usar django-tailwind y cuándo django-tailwind-cli

Mi criterio práctico es este:

Usa django-tailwind-cli si:

• No quieres Node
• Tu frontend vive en templates Django
• Buscas simplicidad y rendimiento

Usa django-tailwind si:

• Ya usas Node en el proyecto
• Tienes tooling frontend complejo
• Compartes Tailwind con otros frameworks

No hay dogmas. Hay contexto.

Configuración para producción y purgado de CSS

Aquí es donde se separan los proyectos serios de los experimentos.

En producción necesitas:

• CSS mínimo
• Purgado activo
• Archivos estáticos bien servidos
• Caché agresiva

Con django-tailwind-cli, el comando:

$ python manage.py tailwind build

Genera un CSS optimizado, purgado y listo para producción.

Sin hacks. Sin scripts raros.

Luego, con collectstatic y herramientas como WhiteNoise, tienes un pipeline limpio y eficiente.

Plugins útiles: Tailwind Typography y DaisyUI

Uno de mis favoritos es Tailwind Typography como mostramos antes.

Definir márgenes, tamaños y estilos para textos largos es tedioso.

Con prose, todo eso se resuelve en segundos.

Y si no quieres construir componentes desde cero:

• DaisyUI te da botones, cards, layouts listos para usar
• Sin dejar Tailwind
• Sin perder control

¿Vale la pena usar Tailwind CSS en Django 6?

Sí.

Pero solo si lo usas bien.

Tailwind no es mágico:

• Ensucia el HTML si no abstraes
• Tiene coste cognitivo
• Requiere disciplina

Pero cuando lo integras correctamente, especialmente con soluciones modernas como django-tailwind-cli, el resultado es:

• CSS mínimo
• Diseño flexible
• Rendimiento excelente
• Flujo de trabajo limpio

En mi caso, hoy ya no descarto Tailwind en Django.

Simplemente elijo la herramienta correcta según el proyecto.

Conclusión

Usar Tailwind CSS en Django 6 no va de copiar comandos, va de entender el flujo completo:

• Desarrollo
• Build
• Producción
• Rendimiento

La aparición de django-tailwind-cli elimina uno de los mayores frenos históricos: Node como dependencia obligatoria.

Si buscas control, rendimiento y una integración elegante, hoy en día esa es la opción que más sentido tiene.

FAQs rápidas

• ¿Se puede usar Tailwind CSS en Django sin Node?
  • Sí, usando django-tailwind-cli.
• ¿Es recomendable usar Tailwind por CDN en Django?
  • No, solo para pruebas rápidas.
• ¿Tailwind reemplaza a Bootstrap en Django?
  • Depende del proyecto, pero ofrece mucho más control.
• ¿Tailwind afecta el rendimiento?
  • Solo si lo usas mal. Con purgado, es extremadamente eficiente.

Siguiente paso aprende sobre el Problema del N+1 en el ORM de Django y como evitarlo