Como usar Tailwind CSS en una app de Django

3 min readJun 18, 2024

Tailwind CSS es un framework CSS que es bastante versátil, debido a que permite que cualquier tipo de diseño se pueda indicar directamente desde la clase del elemento, es por esto, que Tailwind ha ganado bastante popularidad en este último tiempo.

Para utlizar Tailwind dentro de una app de Django se puede utilizar la librería django-compressor y el gestor de paquetes npm para la instalación de tailwind. Los pasos necesarios son los siguientes:

Paso 1: Configuración de los templates en Django

Dentro del directorio de Django, crea una nueva carpeta templates/ y configura el archivo settings.py de Django de la siguiente forma para indicarle que se trabajará con esa carpeta:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Paso 2: Instalación de django-compressor

Instala django-compressor ejecutando el siguiente comando:

pip install django-compressor

Y agregalo a la lista de aplicaciones instaladas dentro del archivo settings.py:

# settings.py
INSTALLED_APPS = [
    ...
    'compressor',
    ...
]

Paso 3: Configuración de django-compressor dentro del archivo `settings.py`

COMPRESS_ENABLED = True
COMPRESS_ROOT = BASE_DIR / 'static'
STATICFILES_FINDERS = ('compressor.finders.CompressorFinder',)

Paso 4: Creación de los archivos estáticos

Crea el directorio static/src/ dentro del proyecto, y crea el archivo input.css dentro del directorio creado. El proyecto debiese quedar como se muestra a continuación:

myproject/
├── manage.py
├── templates
├── myproject
│ ├── init.py
│ ├── settings.py
│ ├── urls.py
│ ├── asgi.py
│ └── wsgi.py
└── static
  └── src
    └── input.css

Paso 5: Creación de un archivo html base

Crea un archivo base.html dentro de la carpeta templates, y escribe lo siguiente en su interior:

{% load compress %}
{% load static %}
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind</title>
 
    {% compress css %}
        <link rel="stylesheet" href="{% static 'src/output.css' %}">
    {% endcompress %}
 
</head>
<body>
    {% block content %}

    {% endblock content %}
</body>
</html>

Paso 6: Instalación de Tailwind CSS

Para instalar Tailwind CSS utilizaremos npm:

npm install -D tailwindcss

Para crear el archivo de configuraciones de tailwind tailwind.config.js, ejecutamos el siguiente comando:

npx tailwindcss init

Para que tailwind reconozca que estamos utilizando los archivos html dentro de la carpeta templates editamos el archivo de configuraciones tailwind.congig.js de la siguiente forma:

module.exports = {
    content: [
        './templates/**/*.html'
    ],
    theme: {
    extend: {},
    },
    plugins: [],
}

Paso 7: Importar las directivas de Tailwind

Se deben importar las directivas de Tailwind escribiendo lo siguiente en el archivo input.css que se encuentra dentro del directorio ./static/src/:

@tailwind base;
@tailwind components;
@tailwind utilities;

Paso 8: Compilación del código de Tailwind

Para compilar el código de Tailwind que necesita Django para importar los estilos, se debe ejecutar el siguiente comando:

npx tailwindcss -i ./static/src/input.css -o ./static/src/output.css --minify

Esto creara un archivo output.css dentro del directorio ./static/src/.

Paso 9: Compilar automáticamente el código de Tailwind

A medida que se va agregando etiquetas con estilo de Tailwind CSS, se necesita volver a ejecutar el comando del paso 8 para que se reconozcan las directivas. Para automatizar esto en el modo de desarrollo, se puede ejecutar el siguiente comando:

npx tailwindcss -i ./static/src/input.css -o ./static/src/output.css --watch --minify

Esto creara un archivo output.css dentro del directorio ./static/src/.

Paso 10: Uso del framework

Ahora ya puedes utilizar Tailwind CSS en tu aplicación de Django:

<div class="bg-black p-3 rounded-lg">
    <h1 class="text-2xl text-white">Hola mundo</h1>
</div>

Conclusiones

Siguiendo estos pasos, podrás utilizar Tailwind dentro de tu aplicación de Django. Cada vez que agregues nuevo código de Tailwind dentro de las etiquetas de HTML, se modificará el archivo ./static/src/output.css si estas utilizando el comando del paso 9.

Espero que te haya sido de utilidad 😃 Cualquier duda, consulta o sugerencia, házmela llegar a través de los comentarios.